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 })

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 }
14 
15 interface AsyncStorage {
16   getItem: (key: string) => Promise<string>
17   setItem: (key: string, value: string) => Promise<unknown>
18   removeItem: (key: string) => Promise<unknown>
19 }

The default options are:

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