Installation // Getting Started // Supported Features // ReScript Brazil Community

⚠️ This repo contains experimental bindings for @tanstack/query using the new optional fields API. If you're looking for bindings to the React Query v3 click here.

Installation

Install the package using npm/yarn:

yarn add @rescriptbr/react-query @tanstack/react-query

Add the package to bs-dependencies in your bsconfig.json:

{
"bs-dependencies": [
"@rescript/react",
"@rescriptbr/react-query"
]
}

Basic usage

moduleFetch= {
typeresponse
@sendexternaljson: response=>Js.Promise.t<'a> ="json"
@valexternalfetch: string=>Js.Promise.t<response> ="fetch"
}
typetodo= {id: string, title: string}
letapiUrl="https://jsonplaceholder.typicode.com/todos/1"letfetchTodos= (_): Js.Promise.t<todo> => {
Fetch.fetch(apiUrl)->Promise.then(Fetch.json)
}
moduleTodoItem= {
@react.componentletmake= () => {
letqueryResult=ReactQuery.useQuery({
queryFn: fetchTodos,
queryKey: ["todos"],
/* * Helper functions to convert unsupported TypeScript types in ReScript * Check out the module ReactQuery_Utils.res */refetchOnWindowFocus: ReactQuery.refetchOnWindowFocus(#bool(false)),
})
<div>
{switchqueryResult {
| {isLoading: true} =>"Loading..."->React.string
| {data: Some(todo), isLoading: false, isError: false} =>`Todo Title ${todo.title}`->React.string
| _=>`Unexpected error...`->React.string
}}
</div>
}
}
/* * Create a new client */letclient=ReactQuery.Provider.createClient()
@react.componentletmake= () => {
<ReactQuery.Providerclient>
<div>
<h1> {React.string("ReScript + React Query")} </h1>
<TodoItem />
</div>
</ReactQuery.Provider>
}

Checkout the compiler output

The JavaScript output is simple, very similar to the original API and *almost* zero-cost.

// Generated by ReScript, PLEASE EDIT WITH CAREimport*asReactfrom"react";import*asReactQueryfrom"@rescriptbr/react-query/src/ReactQuery.bs.js";import*asReactQuery$1from"react-query";varFetch={};varapiUrl="https://jsonplaceholder.typicode.com/todos/1";functionfetchTodos(param){returnfetch(apiUrl).then(function(prim){returnprim.json();});}functionApp$TodoItem(Props){varqueryResult=ReactQuery$1.useQuery({queryKey: "todos",queryFn: fetchTodos,refetchOnWindowFocus: ReactQuery.refetchOnWindowFocus({NAME: "bool",VAL: false,}),});vartmp;if(queryResult.isLoading){tmp="Loading...";}elseif(queryResult.isError){tmp="Unexpected error...";}else{vartodo=queryResult.data;tmp=todo!==undefined ? "Todo Title "+todo.title : "Unexpected error...";}returnReact.createElement("div",undefined,tmp);}varTodoItem={make: App$TodoItem,};varclient=newReactQuery$1.QueryClient();functionApp(Props){returnReact.createElement(ReactQuery$1.QueryClientProvider,{client: client,children: React.createElement("div",undefined,React.createElement("h1",undefined,"ReScript + React Query"),React.createElement(App$TodoItem,{})),});}

Supported features

These bindings are work in progress, check out the supported features:

• ✅ = Fully implemented
• ⬜ = Not implemented yet
• ⚙️ = Work in progress
• ⚠️= Partially implemented

Hooks

• ✅ useQuery
• ✅ useQueries
• ✅ useMutation
• ✅ useInfiniteQuery
• ✅ useQueryClient
• ✅ useQueryErrorResetBoundary
• ✅ useIsFetching
• ✅ useIsMutating

Providers / Client / Core

• ✅ QueryClientProvider
• ⚙️ QueryClient
• ⚙️ QueryCache
• ⚙️ MutationCache
• ⚙️ QueryObserver
• ⚙️ InfiniteQueryObserver
• ⚙️ QueriesObserver
• ⚙️ QueryErrorResetBoundary

Functions / Helpers

• ⬜ focusManager
• ⬜ onlineManager
• ⬜ setLogger
• ⬜ hydration/Hydrate
• ⬜ hydration/useHydrate
• ⬜ hydration/hydrate
• ⬜ hydration/dehydrate

License

MIT