useQueryState

This library so as to manage global state for TanStack Query.
If you installed this library, you can manage global state other than data fetch.

Installing

Using npm:

``
npm i use-query-state-react-query
`

Using yarn:

`
yarn add use-query-state-react-query
`

Usage example

App.tsx

`tsx
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import Counter from './components/Counter';
import CounterHoge from './components/CounterHoge';

const queryClient = new QueryClient();

function App() {
return (





);
}

export default App;
`

Counter.tsx

`tsx
import React from 'react';
import { useQueryState } from 'use-query-state-react-query';

const Counter: React.FC = () => {
const [count, setCount] = useQueryState(['COUNTER'], 1);
const countUp = () => {
setCount((prev) => prev + 1);
};

// Another case.
// const countUp = () => {
// setCount(count + 1);
// };
return (


);
};

export default Counter;
`

CounterHoge.tsx

`tsx
import React from 'react';
import { useQueryState } from 'use-query-state-react-query';

const CounterHoge: React.FC = () => {
const [count] = useQueryState(['COUNTER']);
return (


);
};

export default CounterHoge;
``