This utility comes as a separate package and is available under the '@tanstack/query-async-storage-persister' import.
npm install @tanstack/query-async-storage-persister @tanstack/react-query-persist-client npm install @tanstack/query-async-storage-persister @tanstack/react-query-persist-client or
pnpm add @tanstack/query-async-storage-persister @tanstack/react-query-persist-client pnpm add @tanstack/query-async-storage-persister @tanstack/react-query-persist-client or
yarn add @tanstack/query-async-storage-persister @tanstack/react-query-persist-client yarn add @tanstack/query-async-storage-persister @tanstack/react-query-persist-client or
bun add @tanstack/query-async-storage-persister @tanstack/react-query-persist-client bun add @tanstack/query-async-storage-persister @tanstack/react-query-persist-client 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 = new QueryClient({ defaultOptions: { queries: { gcTime: 1000 * 60 * 60 * 24, // 24 hours }, }, }) const asyncStoragePersister = createAsyncStoragePersister({ storage: AsyncStorage, }) const Root = () => ( <PersistQueryClientProvider client={queryClient} persistOptions={{ persister: asyncStoragePersister }} > <App /> </PersistQueryClientProvider> ) export default Root 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 = new QueryClient({ defaultOptions: { queries: { gcTime: 1000 * 60 * 60 * 24, // 24 hours }, }, }) const asyncStoragePersister = createAsyncStoragePersister({ storage: AsyncStorage, }) const Root = () => ( <PersistQueryClientProvider client={queryClient} persistOptions={{ persister: asyncStoragePersister }} > <App /> </PersistQueryClientProvider> ) export default Root Retries work the same as for a SyncStoragePersister, except that they can also be asynchronous. You can also use all the predefined retry handlers.
Call this function to create an asyncStoragePersister that you can use later with persistQueryClient.
createAsyncStoragePersister(options: CreateAsyncStoragePersisterOptions) createAsyncStoragePersister(options: CreateAsyncStoragePersisterOptions) interface CreateAsyncStoragePersisterOptions { /** The storage client used for setting an retrieving items from cache */ storage: AsyncStorage | undefined | null /** The key to use when storing the cache to localStorage */ key?: string /** To avoid localStorage spamming, * pass a time in ms to throttle saving the cache to disk */ throttleTime?: number /** How to serialize the data to storage */ serialize?: (client: PersistedClient) => string /** How to deserialize the data from storage */ deserialize?: (cachedString: string) => PersistedClient /** How to retry persistence on error **/ retry?: AsyncPersistRetryer } interface AsyncStorage<TStorageValue = string> { getItem: (key: string) => MaybePromise<TStorageValue | undefined | null> setItem: (key: string, value: TStorageValue) => MaybePromise<unknown> removeItem: (key: string) => MaybePromise<void> entries?: () => MaybePromise<Array<[key: string, value: TStorageValue]>> } interface CreateAsyncStoragePersisterOptions { /** The storage client used for setting an retrieving items from cache */ storage: AsyncStorage | undefined | null /** The key to use when storing the cache to localStorage */ key?: string /** To avoid localStorage spamming, * pass a time in ms to throttle saving the cache to disk */ throttleTime?: number /** How to serialize the data to storage */ serialize?: (client: PersistedClient) => string /** How to deserialize the data from storage */ deserialize?: (cachedString: string) => PersistedClient /** How to retry persistence on error **/ retry?: AsyncPersistRetryer } interface AsyncStorage<TStorageValue = string> { getItem: (key: string) => MaybePromise<TStorageValue | undefined | null> setItem: (key: string, value: TStorageValue) => MaybePromise<unknown> removeItem: (key: string) => MaybePromise<void> entries?: () => MaybePromise<Array<[key: string, value: TStorageValue]>> } The default options are:
{ key = `REACT_QUERY_OFFLINE_CACHE`, throttleTime = 1000, serialize = JSON.stringify, deserialize = JSON.parse, } { key = `REACT_QUERY_OFFLINE_CACHE`, throttleTime = 1000, serialize = JSON.stringify, deserialize = JSON.parse, } 
