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 }

serialize and deserialize options

There is a limit to the amount of data which can be stored in localStorage. If you need to store more data in localStorage, you can override the serialize and deserialize functions to compress and decrompress the data using a library like lz-string.

1 import { QueryClient } from 'react-query';
2 import { persistQueryClient } from 'react-query/persistQueryClient'
3 import { createWebStoragePersister } from 'react-query/createWebStoragePersister'
4 
5 import { compress, decompress } from 'lz-string';
6 
7 const queryClient = new QueryClient({ defaultOptions: { queries: { staleTime: Infinity } } });
8 
9 persistQueryClient({
10   queryClient: connectionsQueryClient,
11   persistor: createWebStoragePersister({
12     storage: window.localStorage,
13     serialize: data => compress(JSON.stringify(data)),
14     deserialize: data => JSON.parse(decompress(data)),
15   }),
16   maxAge: Infinity,
17 });