createAsyncStoragePersister

Installation

This utility comes packaged with react-query and is available under the react-query/createAsyncStoragePersister import.

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
• Pass it to the persistQueryClient function

1 import AsyncStorage from '@react-native-async-storage/async-storage'
2 import { persistQueryClient } from 'react-query/persistQueryClient'
3 import { createAsyncStoragePersister } from 'react-query/createAsyncStoragePersister'
4 
5 const queryClient = new QueryClient({
6   defaultOptions: {
7     queries: {
8       cacheTime: 1000 * 60 * 60 * 24, // 24 hours
9     },
10   },
11 })
12 
13 const asyncStoragePersister = createAsyncStoragePersister({
14   storage: AsyncStorage
15 })
16 
17 persistQueryClient({
18   queryClient,
19   persister: asyncStoragePersister,
20 })

Retries

Retries work the same as for a WebStoragePersister, except that they can also be asynchronous. You can also use all the predefined retry handlers.

API

createAsyncStoragePersister

Call this function to create an asyncStoragePersister that you can use later with persistQueryClient.

 createAsyncStoragePersister(options: CreateAsyncStoragePersisterOptions)

Options

1 interface CreateAsyncStoragePersisterOptions {
2   /** The storage client used for setting an retrieving items from cache */
3   storage: AsyncStorage
4   /** The key to use when storing the cache to localStorage */
5   key?: string
6   /** To avoid localStorage spamming,
7    * pass a time in ms to throttle saving the cache to disk */
8   throttleTime?: number
9   /** How to serialize the data to storage */
10   serialize?: (client: PersistedClient) => string
11   /** How to deserialize the data from storage */
12   deserialize?: (cachedString: string) => PersistedClient
13   /** How to retry persistence on error **/
14   retry?: AsyncPersistRetryer
15 }
16 
17 interface AsyncStorage {
18   getItem: (key: string) => Promise<string>
19   setItem: (key: string, value: string) => Promise<unknown>
20   removeItem: (key: string) => Promise<unknown>
21 }

The default options are:

1 {
2   key = `REACT_QUERY_OFFLINE_CACHE`,
3   throttleTime = 1000,
4   serialize = JSON.stringify,
5   deserialize = JSON.parse,
6 }