createWebStoragePersister

Installation

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

Usage

• Import the createWebStoragePersister function
• Create a new webStoragePersister
• Pass it to the persistQueryClient function

1 import { persistQueryClient } from 'react-query/persistQueryClient'
2 import { createWebStoragePersister } from 'react-query/createWebStoragePersister'
3 
4 const queryClient = new QueryClient({
5   defaultOptions: {
6     queries: {
7       cacheTime: 1000 * 60 * 60 * 24, // 24 hours
8     },
9   },
10 })
11 
12 const localStoragePersister = createWebStoragePersister({ storage: window.localStorage })
13 // const sessionStoragePersister = createWebStoragePersister({ storage: window.sessionStorage })
14 
15 persistQueryClient({
16   queryClient,
17   persister: localStoragePersister,
18 })

API

createWebStoragePersister

Call this function to create a webStoragePersister that you can use later with persistQueryClient.

 createWebStoragePersister(options: CreateWebStoragePersisterOptions)

Options

1 interface CreateWebStoragePersisterOptions {
2   /** The storage client used for setting an retrieving items from cache (window.localStorage or window.sessionStorage) */
3   storage: Storage
4   /** The key to use when storing the cache */
5   key?: string
6   /** To avoid 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 }

The default options are:

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