createSyncStoragePersister
安装
此实用程序作为单独的包提供，可在 '@tanstack/query-sync-storage-persister' 导入下使用。
bash
npm install @tanstack/query-sync-storage-persister @tanstack/react-query-persist-client
npm install @tanstack/query-sync-storage-persister @tanstack/react-query-persist-client
或
bash
pnpm add @tanstack/query-sync-storage-persister @tanstack/react-query-persist-client
pnpm add @tanstack/query-sync-storage-persister @tanstack/react-query-persist-client
或
bash
yarn add @tanstack/query-sync-storage-persister @tanstack/react-query-persist-client
yarn add @tanstack/query-sync-storage-persister @tanstack/react-query-persist-client
或
bash
bun add @tanstack/query-sync-storage-persister @tanstack/react-query-persist-client
bun add @tanstack/query-sync-storage-persister @tanstack/react-query-persist-client
用法
- 导入 createSyncStoragePersister 函数
- 创建一个新的 syncStoragePersister
- 将其传递给 persistQueryClient 函数
tsx
import { persistQueryClient } from '@tanstack/react-query-persist-client'
import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister'
const queryClient = new QueryClient({
defaultOptions: {
queries: {
gcTime: 1000 * 60 * 60 * 24, // 24 hours
},
},
})
const localStoragePersister = createSyncStoragePersister({
storage: window.localStorage,
})
// const sessionStoragePersister = createSyncStoragePersister({ storage: window.sessionStorage })
persistQueryClient({
queryClient,
persister: localStoragePersister,
})
import { persistQueryClient } from '@tanstack/react-query-persist-client'
import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister'
const queryClient = new QueryClient({
defaultOptions: {
queries: {
gcTime: 1000 * 60 * 60 * 24, // 24 hours
},
},
})
const localStoragePersister = createSyncStoragePersister({
storage: window.localStorage,
})
// const sessionStoragePersister = createSyncStoragePersister({ storage: window.sessionStorage })
persistQueryClient({
queryClient,
persister: localStoragePersister,
})
重试
持久化可能会失败，例如，如果大小超过存储上的可用空间。可以通过为 persister 提供 retry 函数来优雅地处理错误。
retry 函数接收它尝试保存的 persistedClient，以及 error 和 errorCount 作为输入。它应该返回一个新的 PersistedClient，它将再次尝试持久化。如果返回 undefined，则不会再尝试持久化。
tsx
export type PersistRetryer = (props: {
persistedClient: PersistedClient
error: Error
errorCount: number
}) => PersistedClient | undefined
export type PersistRetryer = (props: {
persistedClient: PersistedClient
error: Error
errorCount: number
}) => PersistedClient | undefined
预定义的策略
默认情况下，不会发生重试。您可以使用预定义的策略之一来处理重试。它们可以从 '@tanstack/react-query-persist-client' 导入
- removeOldestQuery
- 将返回一个新的 PersistedClient，其中删除了最旧的查询。
tsx
const localStoragePersister = createSyncStoragePersister({
storage: window.localStorage,
retry: removeOldestQuery,
})
const localStoragePersister = createSyncStoragePersister({
storage: window.localStorage,
retry: removeOldestQuery,
})
API
createSyncStoragePersister
调用此函数以创建一个 syncStoragePersister，您可以在以后与 persistQueryClient 一起使用。
tsx
createSyncStoragePersister(options: CreateSyncStoragePersisterOptions)
createSyncStoragePersister(options: CreateSyncStoragePersisterOptions)
选项
tsx
interface CreateSyncStoragePersisterOptions {
/** The storage client used for setting an retrieving items from cache (window.localStorage or window.sessionStorage) */
storage: Storage | undefined | null
/** The key to use when storing the cache */
key?: string
/** To avoid spamming,
* pass a time in ms to throttle saving the cache to disk */
throttleTime?: number
/** How to serialize the data to storage */
serialize?: (client: PersistedClient) => string
/** How to deserialize the data from storage */
deserialize?: (cachedString: string) => PersistedClient
/** How to retry persistence on error **/
retry?: PersistRetryer
}
interface CreateSyncStoragePersisterOptions {
/** The storage client used for setting an retrieving items from cache (window.localStorage or window.sessionStorage) */
storage: Storage | undefined | null
/** The key to use when storing the cache */
key?: string
/** To avoid spamming,
* pass a time in ms to throttle saving the cache to disk */
throttleTime?: number
/** How to serialize the data to storage */
serialize?: (client: PersistedClient) => string
/** How to deserialize the data from storage */
deserialize?: (cachedString: string) => PersistedClient
/** How to retry persistence on error **/
retry?: PersistRetryer
}
默认选项是
tsx
{
key = `REACT_QUERY_OFFLINE_CACHE`,
throttleTime = 1000,
serialize = JSON.stringify,
deserialize = JSON.parse,
}
{
key = `REACT_QUERY_OFFLINE_CACHE`,
throttleTime = 1000,
serialize = JSON.stringify,
deserialize = JSON.parse,
}
serialize 和 deserialize 选项
localStorage 中可以存储的数据量是有限制的。如果您需要在 localStorage 中存储更多数据，您可以覆盖 serialize 和 deserialize 函数，以使用诸如 lz-string 之类的库来压缩和解压缩数据。
tsx
import { QueryClient } from '@tanstack/react-query'
import { persistQueryClient } from '@tanstack/react-query-persist-client'
import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister'
import { compress, decompress } from 'lz-string'
const queryClient = new QueryClient({
defaultOptions: { queries: { staleTime: Infinity } },
})
persistQueryClient({
queryClient: queryClient,
persister: createSyncStoragePersister({
storage: window.localStorage,
serialize: (data) => compress(JSON.stringify(data)),
deserialize: (data) => JSON.parse(decompress(data)),
}),
maxAge: Infinity,
})
import { QueryClient } from '@tanstack/react-query'
import { persistQueryClient } from '@tanstack/react-query-persist-client'
import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister'
import { compress, decompress } from 'lz-string'
const queryClient = new QueryClient({
defaultOptions: { queries: { staleTime: Infinity } },
})
persistQueryClient({
queryClient: queryClient,
persister: createSyncStoragePersister({
storage: window.localStorage,
serialize: (data) => compress(JSON.stringify(data)),
deserialize: (data) => JSON.parse(decompress(data)),
}),
maxAge: Infinity,
})
