persistQueryClient

This is set of utilities for interacting with "persisters" which save your queryClient for later use. Different persisters can be used to store your client and cache to many different storage layers.

Build Persisters

• createWebStoragePersister
• createAsyncStoragePersister
• create a custom persister

How It Works

IMPORTANT - for persist to work properly, you probably want to pass QueryClient a cacheTime value to override the default during hydration (as shown above).

If it is not set when creating the QueryClient instance, it will default to 300000 (5 minutes) for hydration, and the stored cache will be discarded after 5 minutes of inactivity. This is the default garbage collection behavior.

It should be set as the same value or higher than persistQueryClient's maxAge option. E.g. if maxAge is 24 hours (the default) then cacheTime should be 24 hours or higher. If lower than maxAge, garbage collection will kick in and discard the stored cache earlier than expected.

You can also pass it Infinity to disable garbage collection behavior entirely.

1 const queryClient = new QueryClient({
2   defaultOptions: {
3     queries: {
4       cacheTime: 1000 * 60 * 60 * 24, // 24 hours
5     },
6   },
7 })

Environment Checking

A check for window undefined is performed prior to saving/restoring/removing your data (avoids build errors).

Cache Busting

Sometimes you may make changes to your application or data that immediately invalidate any and all cached data. If and when this happens, you can pass a buster string option. If the cache that is found does not also have that buster string, it will be discarded. The following several functions accept this option:

1 persistQueryClient({ queryClient, persister, buster: buildHash })
2 persistQueryClientSave({ queryClient, persister, buster: buildHash })
3 persistQueryClientRestore({ queryClient, persister, buster: buildHash })

Removal

If data is found to be any of the following:

1. expired (see maxAge)
2. busted (see buster)
3. error (ex: throws ...)
4. empty (ex: undefined)

the persister removeClient() is called and the cache is immediately discarded.

API

persistQueryClientSave

• Your query/mutation are dehydrated and stored by the persister you provided.
• createWebStoragePersister and createAsyncStoragePersister throttle this action to happen at most every 1 second to save on potentially expensive writes. Review their documentation to see how to customize their throttle timing.

You can use this to explicitly persist the cache at the moment(s) you choose.

1 persistQueryClientSave({
2   queryClient,
3   persister,
4   buster = '',
5   dehydrateOptions = undefined,
6 })

persistQueryClientSubscribe

Runs persistQueryClientSave whenever the cache changes for your queryClient. For example: you might initiate the subscribe when a user logs-in and checks "Remember me".

• It returns an unsubscribe function which you can use to discontinue the monitor; ending the updates to the persisted cache.
• If you want to erase the persisted cache after the unsubscribe, you can send a new buster to persistQueryClientRestore which will trigger the persister's removeClient function and discard the persisted cache.

1 persistQueryClientSubscribe({
2   queryClient,
3   persister,
4   buster = '',
5   dehydrateOptions = undefined,
6 })

persistQueryClientRestore

• Attempts to hydrate a previously persisted dehydrated query/mutation cache from the persister back into the query cache of the passed query client.
• If a cache is found that is older than the maxAge (which by default is 24 hours), it will be discarded. This timing can be customized as you see fit.

You can use this to restore the cache at moment(s) you choose.

1 persistQueryClientRestore({
2   queryClient,
3   persister,
4   maxAge = 1000 * 60 * 60 * 24, // 24 hours
5   buster = '',
6   hydrateOptions = undefined,
7 })

persistQueryClient

Takes the following actions:

1. Immediately restores any persisted cache (see persistQueryClientRestore)
2. Subscribes to the query cache and returns the unsubscribe function (see persistQueryClientSubscribe).

This functionality is preserved from version 3.x.

1 persistQueryClient({
2   queryClient,
3   persister,
4   maxAge = 1000 * 60 * 60 * 24, // 24 hours
5   buster = '',
6   hydrateOptions = undefined,
7   dehydrateOptions = undefined,
8 })

Options

All options available are as follows:

1 interface PersistQueryClientOptions {
2   /** The QueryClient to persist */
3   queryClient: QueryClient
4   /** The Persister interface for storing and restoring the cache
5    * to/from a persisted location */
6   persister: Persister
7   /** The max-allowed age of the cache in milliseconds.
8    * If a persisted cache is found that is older than this
9    * time, it will be **silently** discarded
10    * (defaults to 24 hours) */
11   maxAge?: number
12   /** A unique string that can be used to forcefully
13    * invalidate existing caches if they do not share the same buster string */
14   buster?: string
15   /** The options passed to the hydrate function
16    * Not used on `persistQueryClientSave` or `persistQueryClientSubscribe` */
17   hydrateOptions?: HydrateOptions
18   /** The options passed to the dehydrate function 
19   * Not used on `persistQueryClientRestore` */
20   dehydrateOptions?: DehydrateOptions
21 }

There are actually three interfaces available:

• PersistedQueryClientSaveOptions is used for persistQueryClientSave and persistQueryClientSubscribe (doesn't use hydrateOptions).
• PersistedQueryClientRestoreOptions is used for persistQueryClientRestore (doesn't use dehydrateOptions).
• PersistQueryClientOptions is used for persistQueryClient

Persisters

Persisters Interface

Persisters have the following interfaces:

1 export interface Persister {
2   persistClient(persistClient: PersistedClient): Promisable<void>
3   restoreClient(): Promisable<PersistedClient | undefined>
4   removeClient(): Promisable<void>
5 }

Persisted Client entries have the following interface:

1 export interface PersistedClient {
2   timestamp: number
3   buster: string
4   cacheState: any
5 }

You can import these (to build a persister):

 import { PersistedClient, Persister } from "react-query/persistQueryClient";

Building A Persister

You can persist however you like. Here is an example of how to build an Indexed DB persister. Compared to Web Storage API, Indexed DB is faster, stores more than 5MB, and doesn't require serialization. That means it can readily store Javascript native types, such as Date and File.

1 import { get, set, del } from "idb-keyval";
2 import { PersistedClient, Persister } from "react-query/persistQueryClient";
3 
4 /**
5  * Creates an Indexed DB persister
6  * @see https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API
7  */
8 export function createIDBPersister(idbValidKey: IDBValidKey = "reactQuery") {
9   return {
10     persistClient: async (client: PersistedClient) => {
11       set(idbValidKey, client);
12     },
13     restoreClient: async () => {
14       return await get<PersistedClient>(idbValidKey);
15     },
16     removeClient: async () => {
17       await del(idbValidKey);
18     },
19   } as Persister;
20 }