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-queryAdd 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 ReactQuery$1 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 = ReactQuery$1.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 ReactQuery$1.QueryClient();
function App(Props) {
return React.createElement(ReactQuery$1.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