What is @tanstack/react-query-persist-client?
@tanstack/react-query-persist-client is a package that provides utilities to persist and rehydrate the state of React Query across sessions. This can be useful for maintaining the state of your queries even after a page reload or when navigating away from the application.
What are @tanstack/react-query-persist-client's main functionalities?
Persisting Query State
This feature allows you to persist the state of your queries using local storage. The `persistQueryClient` function is used to set up the persistence, and `createWebStoragePersistor` is used to specify the storage mechanism.
import { persistQueryClient } from '@tanstack/react-query-persist-client';
import { createWebStoragePersistor } from '@tanstack/react-query-persist-client/web-storage';
const queryClient = new QueryClient();
const persistor = createWebStoragePersistor({ storage: window.localStorage });
persistQueryClient({ queryClient, persistor });
Rehydrating Query State
This feature allows you to rehydrate the state of your queries from the persisted storage. The `persistQueryClientRestore` function is used to restore the state, ensuring that your queries are in the same state as they were before the page reload or navigation.
import { persistQueryClientRestore } from '@tanstack/react-query-persist-client';
import { createWebStoragePersistor } from '@tanstack/react-query-persist-client/web-storage';
const queryClient = new QueryClient();
const persistor = createWebStoragePersistor({ storage: window.localStorage });
persistQueryClientRestore({ queryClient, persistor });
Other packages similar to @tanstack/react-query-persist-client
redux-persist
redux-persist is a library that allows you to persist and rehydrate a Redux store. It provides similar functionality to @tanstack/react-query-persist-client but is specific to Redux. It supports various storage engines and has a flexible configuration.
apollo-cache-persist
apollo-cache-persist is a library for persisting and rehydrating the Apollo Client cache. It provides similar functionality to @tanstack/react-query-persist-client but is specific to Apollo Client. It supports multiple storage options and is useful for maintaining the state of GraphQL queries.
react-query
react-query is a library for managing server state in React applications. While it does not provide built-in persistence, it can be extended with @tanstack/react-query-persist-client for persistence capabilities. It focuses on fetching, caching, and synchronizing server data.