@tanstack/react-query-persist-client

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.