https://github.com/scality/react-chained-query
A wrapper of react-query useQuery hook allowing chaining queries.
https://github.com/scality/react-chained-query
Last synced: about 1 year ago
JSON representation
A wrapper of react-query useQuery hook allowing chaining queries.
- Host: GitHub
- URL: https://github.com/scality/react-chained-query
- Owner: scality
- License: apache-2.0
- Created: 2023-01-24T09:47:07.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-04-24T16:54:30.000Z (about 2 years ago)
- Last Synced: 2024-04-24T19:19:53.301Z (about 2 years ago)
- Language: TypeScript
- Size: 395 KB
- Stars: 2
- Watchers: 21
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-chained-query
## Features
### useChainedQuery
`useChainedQuery` hook consit of a wrapper on top of react-query `useQuery`. This `useChainedQuery` hook allow chaining queries instead of runnning them concurently, it aims to solve problems that may occurs when hitting a slow backend with too many requests.
By managing a queue and executing the request one after another, it could give the capability for an application to display the information sequentially.
### useChainedMutations
This `useChainedMutations` hook takes an array of mutations and a function to compute the variables for the next mutation in the chain. It returns an object containing a `mutate` function that triggers the chain of mutations, a `computeVariablesForNext` function that computes the variables for the next mutation, and an array of `mutationsWithRetry` that includes a retry function for each mutation.
## Install
```bash
npm install @scality/react-chained-query
```
## Quickstart
### useChainedQuery
```js
import { QueryClient, QueryClientProvider } from 'react-query';
import { ChainedQueryProvider, useChainedQuery } from './useChainedQuery';
import { useEffect, useState } from 'react';
const queryClient = new QueryClient();
function Component1() {
const { data } = useChainedQuery({
queryKey: ['key', 'arg'],
queryFn: async () => {
await new Promise((resolve) => setTimeout(resolve, 2_000));
return '1';
},
});
return <>{data}>;
}
function Component2() {
const { data } = useChainedQuery({
queryKey: ['key', 'arg1'],
queryFn: async () => {
await new Promise((resolve) => setTimeout(resolve, 1_000));
return '2';
},
});
return <>{data}>;
}
export default function App() {
return (
Hello, useChainedQuery!
);
}
```
[A complete example here](https://codesandbox.io/s/use-chained-query-forked-j3mfed?file=/src/App.tsx)
### useChainedMutations
```js
import { useMutation } from 'react-query';
import { useChainedMutations } from './useChainedMutations';
const useUpdatePosts = () => {
return useMutation({
mutationFn: async (id: string) => {
const res = await fetch(
`https://jsonplaceholder.typicode.com/posts/${id}`,
{
headers: {
'Content-type': 'application/json; charset=UTF-8',
},
method: 'PUT',
body: JSON.stringify({
id: 1,
title: 'foo',
body: 'bar',
userId: id,
}),
},
);
if (!res.ok) throw res.statusText;
return await res.json();
},
});
};
const mutations = [{ ...useUpdatePosts, 'user1'}, { ...useUpdatePosts, 'user2'}];
const { mutate } = useChainedMutations({
mutations,
computeVariablesForNext: {
user1: () => {
return 'user1';
},
user2: () => {
return 'user2';
}
},
});
export default function App() {
return (
Hello, useChainedMutations!
mutate()}>
);
}
```
## Advanced Documentation
In order to use `useChainedQuery` in your component, it has be below `QueryClientProvider` and `ChainedQueryProvider`.
It's possibile to have several `ChainedQueryProvider` each of them would then holds it's own queue of queries.
```js
```
Made with ❤️ by Pod-UI at [Scality](https://github.com/scality/)