@tanstack/query-sync-storage-persister

What is @tanstack/query-sync-storage-persister?

@tanstack/query-sync-storage-persister is a package designed to persist TanStack Query cache data to various storage solutions, such as localStorage or sessionStorage. This allows for the state of queries to be saved and restored, providing a more seamless user experience across sessions.

What are @tanstack/query-sync-storage-persister's main functionalities?

Persisting Query Cache to Local Storage

This feature allows you to persist the query cache to the local storage. The code sample demonstrates how to set up the persister with localStorage and integrate it with the TanStack Query client.

const { persistQueryClient } = require('@tanstack/query-sync-storage-persister');
const { QueryClient, QueryCache } = require('@tanstack/react-query');
const { createSyncStoragePersister } = require('@tanstack/query-sync-storage-persister');

const queryClient = new QueryClient({
  queryCache: new QueryCache(),
});

const localStoragePersister = createSyncStoragePersister({
  storage: window.localStorage,
});

persistQueryClient({
  queryClient,
  persister: localStoragePersister,
});

Persisting Query Cache to Session Storage

This feature allows you to persist the query cache to the session storage. The code sample demonstrates how to set up the persister with sessionStorage and integrate it with the TanStack Query client.

const { persistQueryClient } = require('@tanstack/query-sync-storage-persister');
const { QueryClient, QueryCache } = require('@tanstack/react-query');
const { createSyncStoragePersister } = require('@tanstack/query-sync-storage-persister');

const queryClient = new QueryClient({
  queryCache: new QueryCache(),
});

const sessionStoragePersister = createSyncStoragePersister({
  storage: window.sessionStorage,
});

persistQueryClient({
  queryClient,
  persister: sessionStoragePersister,
});

Other packages similar to @tanstack/query-sync-storage-persister

redux-persist

redux-persist is a library used to persist and rehydrate a Redux store. It provides similar functionality in terms of persisting state to storage solutions like localStorage or sessionStorage. However, it is designed specifically for Redux, whereas @tanstack/query-sync-storage-persister is designed for TanStack Query.

localforage

localforage is a library that provides a simple API for storing data in various storage solutions, including IndexedDB, WebSQL, and localStorage. While it is not specifically designed for persisting query caches, it can be used in conjunction with other libraries to achieve similar functionality.

idb-keyval

idb-keyval is a small library for storing key-value pairs in IndexedDB. It is a lower-level solution compared to @tanstack/query-sync-storage-persister, which is specifically designed for persisting TanStack Query caches. idb-keyval can be used as a building block for more complex persistence solutions.