Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rescriptbr/react-query
⚛️ ReScript bindings for React Query
https://github.com/rescriptbr/react-query
react-query-bindings rescript rescript-bindings rescript-react rescript-react-bindings rescript-react-query rescript-react-query-bindings
Last synced: 12 days ago
JSON representation
⚛️ ReScript bindings for React Query
- Host: GitHub
- URL: https://github.com/rescriptbr/react-query
- Owner: rescriptbr
- Created: 2021-04-27T00:31:53.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-07-03T11:59:10.000Z (4 months ago)
- Last Synced: 2024-08-01T19:56:09.096Z (3 months ago)
- Topics: react-query-bindings, rescript, rescript-bindings, rescript-react, rescript-react-bindings, rescript-react-query, rescript-react-query-bindings
- Language: ReScript
- Homepage:
- Size: 56.4 MB
- Stars: 77
- Watchers: 2
- Forks: 8
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Installation //
Getting Started //
Supported Features //
ReScript Brazil Community
> :warning: This repo contains experimental bindings for [@tanstack/query](https://tanstack.com/query/v4) using the new optional fields API.
If you're looking for bindings to the React Query v3 click [here](https://github.com/rescriptbr/react-query/tree/v0.0.2).
## Installation
Install the package using npm/yarn:
```sh
yarn add @rescriptbr/react-query @tanstack/react-query
```
Add the package to `bs-dependencies` in your `bsconfig.json`:
```json
{
"bs-dependencies": [
"@rescript/react",
"@rescriptbr/react-query"
]
}
```
## Basic usage
```rescript
module Fetch = {
type response
@send external json: response => Js.Promise.t<'a> = "json"
@val external fetch: string => Js.Promise.t = "fetch"
}
type todo = {id: string, title: string}
let apiUrl = "https://jsonplaceholder.typicode.com/todos/1"
let fetchTodos = (_): Js.Promise.t => {
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)),
})
{switch queryResult {
| {isLoading: true} => "Loading..."->React.string
| {data: Some(todo), isLoading: false, isError: false} =>
`Todo Title ${todo.title}`->React.string
| _ => `Unexpected error...`->React.string
}}
}
}
/*
* Create a new client
*/
let client = ReactQuery.Provider.createClient()
@react.component
let make = () => {
{React.string("ReScript + React Query")}
}
```
Checkout the compiler output
The JavaScript output is simple, very similar to the original API and *almost* zero-cost.
```javascript
// 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, {})
),
});
}
```
## 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