1313Install the package using npm/yarn:
1414
1515``` sh
16- yarn add @rescriptbr/react-query
16+ yarn add @rescriptbr/react-query react-query
1717```
1818
1919Add the package to ` bs-dependencies ` in your ` bsconfig.json ` :
@@ -27,6 +27,130 @@ Add the package to `bs-dependencies` in your `bsconfig.json`:
2727}
2828
2929```
30+ ## Basic usage
31+
32+ ``` rescript
33+ /*
34+ * Local bindings for fetch
35+ */
36+ module Fetch = {
37+ type response
38+
39+ @send external json: response => Js.Promise.t<'a> = "json"
40+ @val external fetch: string => Js.Promise.t<response> = "fetch"
41+ }
42+
43+ type todo = {id: string, title: string}
44+
45+ let apiUrl = "https://jsonplaceholder.typicode.com/todos/1"
46+
47+ let fetchTodos = (_): Js.Promise.t<todo> => {
48+ Fetch.fetch(apiUrl)->Promise.then(Fetch.json)
49+ }
50+
51+ module TodoItem = {
52+ @react.component
53+ let make = () => {
54+ let queryResult = ReactQuery.useQuery(
55+ ReactQuery.queryOptions(
56+ ~queryFn=fetchTodos,
57+ ~queryKey="todos",
58+ /*
59+ * Helper functions to convert unsupported TypeScript types in ReScript
60+ * Check out the module ReactQuery_Utils.res
61+ */
62+ ~refetchOnWindowFocus=ReactQuery.refetchOnWindowFocus(#bool(false)),
63+ (),
64+ ),
65+ )
66+
67+ <div>
68+ {switch queryResult {
69+ | {isLoading: true} => "Loading..."->React.string
70+ | {data: Some(todo), isLoading: false, isError: false} =>
71+ `Todo Title ${todo.title}`->React.string
72+ | _ => `Unexpected error...`->React.string
73+ }}
74+ </div>
75+ }
76+ }
77+
78+ /*
79+ * Create a new client
80+ */
81+ let client = ReactQuery.Provider.createClient()
82+
83+ @react.component
84+ let make = () => {
85+ <ReactQuery.Provider client>
86+ <div> <h1> {React.string("ReScript + React Query")} </h1> <TodoItem /> </div>
87+ </ReactQuery.Provider>
88+ }
89+ ```
90+ <details >
91+ <summary ><strong >Checkout the compiler output</strong ></summary >
92+ The JavaScript output is simple, very similar to the original API and * almost* zero-cost.
93+
94+ ``` javascript
95+ // Generated by ReScript, PLEASE EDIT WITH CARE
96+
97+ import * as React from " react"
98+ import * as ReactQuery from " @rescriptbr/react-query/src/ReactQuery.bs.js"
99+ import * as ReactQuery$1 from " react-query"
100+
101+ var Fetch = {};
102+
103+ var apiUrl = " https://jsonplaceholder.typicode.com/todos/1"
104+
105+ function fetchTodos (param ) {
106+ return fetch (apiUrl).then (function (prim ) {
107+ return prim .json ();
108+ });
109+ }
110+
111+ function App$TodoItem (Props ) {
112+ var queryResult = ReactQuery$1 .useQuery ({
113+ queryKey: " todos"
114+ queryFn: fetchTodos,
115+ refetchOnWindowFocus: ReactQuery .refetchOnWindowFocus ({
116+ NAME : " bool"
117+ VAL : false ,
118+ }),
119+ });
120+ var tmp;
121+ if (queryResult .isLoading ) {
122+ tmp = " Loading..."
123+ } else if (queryResult .isError ) {
124+ tmp = " Unexpected error..."
125+ } else {
126+ var todo = queryResult .data ;
127+ tmp =
128+ todo !== undefined ? " Todo Title " + todo .title : " Unexpected error..."
129+ }
130+ return React .createElement (" div" undefined , tmp);
131+ }
132+
133+ var TodoItem = {
134+ make: App$TodoItem,
135+ };
136+
137+ var client = new ReactQuery$1.QueryClient ();
138+
139+ function App (Props ) {
140+ return React .createElement (ReactQuery$1 .QueryClientProvider , {
141+ client: client,
142+ children: React .createElement (
143+ " div"
144+ undefined ,
145+ React .createElement (" h1" undefined , " ReScript + React Query"
146+ React .createElement (App$TodoItem, {})
147+ ),
148+ });
149+ }
150+
151+ ```
152+
153+ </details >
30154
31155## Supported features
32156These bindings are work in progress, check out the supported features:
0 commit comments