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.
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"
]
}
module Fetch = { type response @send external json: response => Js.Promise.t<'a> = "json" @val external fetch: string => Js.Promise.t<response> = "fetch" } type todo = {id: string, title: string} let apiUrl = "https://jsonplaceholder.typicode.com/todos/1" let fetchTodos = (_): Js.Promise.t<todo> => { Fetch.fetch(apiUrl)->Promise.then(Fetch.json) } module TodoItem = { @react.component let make = () => { let queryResult = 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> {switch queryResult { | {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 */ let client = ReactQuery.Provider.createClient() @react.component let make = () => { <ReactQuery.Provider client> <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 CARE import * as React from "react"; import * as ReactQuery from "@rescriptbr/react-query/src/ReactQuery.bs.js"; import * as ReactQuery1ドル from "react-query"; var Fetch = {}; var apiUrl = "https://jsonplaceholder.typicode.com/todos/1"; function fetchTodos(param) { return fetch(apiUrl).then(function (prim) { return prim.json(); }); } function App$TodoItem(Props) { var queryResult = ReactQuery1ドル.useQuery({ queryKey: "todos", queryFn: fetchTodos, refetchOnWindowFocus: ReactQuery.refetchOnWindowFocus({ NAME: "bool", VAL: false, }), }); var tmp; if (queryResult.isLoading) { tmp = "Loading..."; } else if (queryResult.isError) { tmp = "Unexpected error..."; } else { var todo = queryResult.data; tmp = todo !== undefined ? "Todo Title " + todo.title : "Unexpected error..."; } return React.createElement("div", undefined, tmp); } var TodoItem = { make: App$TodoItem, }; var client = new ReactQuery1ドル.QueryClient(); function App(Props) { return React.createElement(ReactQuery1ドル.QueryClientProvider, { client: client, children: React.createElement( "div", undefined, React.createElement("h1", undefined, "ReScript + React Query"), React.createElement(App$TodoItem, {}) ), }); }
These bindings are work in progress, check out the supported features:
- ✅
=Fully implemented - ⬜
=Not implemented yet - ⚙️
=Work in progress ⚠️ =Partially implemented
- ✅ useQuery
- ✅ useQueries
- ✅ useMutation
- ✅ useInfiniteQuery
- ✅ useQueryClient
- ✅ useQueryErrorResetBoundary
- ✅ useIsFetching
- ✅ useIsMutating
- ✅ QueryClientProvider
- ⚙️ QueryClient
- ⚙️ QueryCache
- ⚙️ MutationCache
- ⚙️ QueryObserver
- ⚙️ InfiniteQueryObserver
- ⚙️ QueriesObserver
- ⚙️ QueryErrorResetBoundary
- ⬜ focusManager
- ⬜ onlineManager
- ⬜ setLogger
- ⬜ hydration/Hydrate
- ⬜ hydration/useHydrate
- ⬜ hydration/hydrate
- ⬜ hydration/dehydrate
MIT