TanStack
Query
Plugins

createAsyncStoragePersister

Installation

This utility comes as a separate package and is available under the '@tanstack/query-async-storage-persister' import.

shell
npm install @tanstack/query-async-storage-persister @tanstack/react-query-persist-client

or

shell
pnpm add @tanstack/query-async-storage-persister @tanstack/react-query-persist-client

or

shell
yarn add @tanstack/query-async-storage-persister @tanstack/react-query-persist-client

or

shell
bun add @tanstack/query-async-storage-persister @tanstack/react-query-persist-client

Usage

  • Import the createAsyncStoragePersister function
  • Create a new asyncStoragePersister
    • you can pass any storage to it that adheres to the AsyncStorage interface - the example below uses the async-storage from React Native.
    • storages that read and write synchronously, like window.localstorage, also adhere to the AsyncStorage interface and can therefore also be used with createAsyncStoragePersister.
  • Wrap your app by using PersistQueryClientProvider component.
tsx
import AsyncStorage from '@react-native-async-storage/async-storage'
import { QueryClient } from '@tanstack/react-query'
import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client'
import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister'

const queryClient =