id | title |
---|---|
createAsyncStoragePersister |
createAsyncStoragePersister |
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
or
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
- Import the
createAsyncStoragePersister
function - Create a new asyncStoragePersister
- you can pass any
storage
to it that adheres to theAsyncStorage
interface - the example below uses the async-storage from React Native
- you can pass any
- Wrap your app by using
PersistQueryClientProvider
component.
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)
interface CreateAsyncStoragePersisterOptions {
/** The storage client used for setting an retrieving items from cache */
storage: AsyncStorage
/** 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 {
getItem: (key: string) => Promise<string>
setItem: (key: string, value: string) => Promise<unknown>
removeItem: (key: string) => Promise<unknown>
}
The default options are:
{
key = `REACT_QUERY_OFFLINE_CACHE`,
throttleTime = 1000,
serialize = JSON.stringify,
deserialize = JSON.parse,
}