createSyncStoragePersister
已弃用
该插件已被弃用，将在下一个主版本中移除。
你可以直接使用 '@tanstack/query-async-storage-persister' 替代。
安装
该工具以独立包形式提供，可通过 '@tanstack/query-sync-storage-persister' 导入。
Shell
1npm install @tanstack/query-sync-storage-persister @tanstack/react-query-persist-client或
Shell
1pnpm add @tanstack/query-sync-storage-persister @tanstack/react-query-persist-client或
Shell
1yarn add @tanstack/query-sync-storage-persister @tanstack/react-query-persist-client或
Shell
1bun add @tanstack/query-sync-storage-persister @tanstack/react-query-persist-client使用方法
- 导入
createSyncStoragePersister函数 - 创建一个新的 syncStoragePersister
- 将其传入
persistQueryClient函数
TypeScript
1import { persistQueryClient } from '@tanstack/react-query-persist-client'2import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister'3 4const queryClient = new QueryClient({5 defaultOptions: {6 queries: {7 gcTime: 24 * 60 * 60 * 1000, // 24 hours8 },9 },10})11 12const localStoragePersister = createSyncStoragePersister({13 storage: window.localStorage,14})15// const sessionStoragePersister = createSyncStoragePersister({ storage: window.sessionStorage })16 17persistQueryClient({18 queryClient,19 persister: localStoragePersister,20})重试机制
持久化操作可能失败，例如当待存储数据大小超出存储空间限制时。你可通过向 persister 提供一个 retry 函数，优雅地处理此类错误。
retry 函数接收三个参数：它尝试保存的 persistedClient、 error 和 errorCount。该函数应返回一个 新的 PersistedClient，persister 将使用该值再次尝试持久化。若返回 undefined，则不再进行后续持久化尝试。
TypeScript
1export type PersistRetryer = (props: {2 persistedClient: PersistedClient3 error: Error4 errorCount: number5}) => PersistedClient | undefined预定义策略
默认情况下不执行任何重试。你可以选用以下预定义策略之一来处理重试。它们可通过 from '@tanstack/react-query-persist-client' 导入：
removeOldestQuery- 返回一个新
PersistedClient，其中移除了最旧的查询。
- 返回一个新
TypeScript
1const localStoragePersister = createSyncStoragePersister({2 storage: window.localStorage,3 retry: removeOldestQuery,4})API
createSyncStoragePersister
调用此函数创建一个 syncStoragePersister，之后可将其与 persistQueryClient 一同使用。
TypeScript
1createSyncStoragePersister(options: CreateSyncStoragePersisterOptions)Options
TypeScript
1interface CreateSyncStoragePersisterOptions {2 /** The storage client used for setting an retrieving items from cache (window.localStorage or window.sessionStorage) */3 storage: Storage | undefined | null4 /** The key to use when storing the cache */5 key?: string6 /** To avoid spamming,7 * pass a time in ms to throttle saving the cache to disk */8 throttleTime?: number9 /** How to serialize the data to storage */10 serialize?: (client: PersistedClient) => string11 /** How to deserialize the data from storage */12 deserialize?: (cachedString: string) => PersistedClient13 /** How to retry persistence on error **/14 retry?: PersistRetryer15}默认选项为：
TypeScript
1{2 key = `REACT_QUERY_OFFLINE_CACHE`,3 throttleTime = 1000,4 serialize = JSON.stringify,5 deserialize = JSON.parse,6}serialize 和 deserialize 选项
localStorage 中可存储的数据量存在上限。
若需在 localStorage 中存储更多数据，可覆写 serialize 和 deserialize 函数，借助 lz-string 等库对数据进行压缩与解压缩。
TypeScript
1import { QueryClient } from '@tanstack/react-query'2import { persistQueryClient } from '@tanstack/react-query-persist-client'3import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister'4 5import { compress, decompress } from 'lz-string'6 7const queryClient = new QueryClient({8 defaultOptions: { queries: { staleTime: Infinity } },9})10 11persistQueryClient({12 queryClient: queryClient,13 persister: createSyncStoragePersister({14 storage: window.localStorage,15 serialize: (data) => compress(JSON.stringify(data)),16 deserialize: (data) => JSON.parse(decompress(data)),17 }),18 maxAge: Infinity,19})