createAsyncStoragePersister
安装
该工具作为独立包提供，可通过 '@tanstack/query-async-storage-persister' 导入。
Shell
1npm install @tanstack/query-async-storage-persister @tanstack/preact-query-persist-client或
Shell
1pnpm add @tanstack/query-async-storage-persister @tanstack/preact-query-persist-client或
Shell
1yarn add @tanstack/query-async-storage-persister @tanstack/preact-query-persist-client或
Shell
1bun add @tanstack/query-async-storage-persister @tanstack/preact-query-persist-client使用方法
- 导入
createAsyncStoragePersister函数 - 创建新的 asyncStoragePersister
- 你可以向其传入任意符合
AsyncStorage接口的storage—— 下方示例使用了 React Native 的 async-storage。 - 同步读写数据的存储（如
window.localstorage）同样符合AsyncStorage接口，因此也可与createAsyncStoragePersister配合使用。
- 你可以向其传入任意符合
- 使用
PersistQueryClientProvider组件包裹你的应用。
TypeScript
1import AsyncStorage from '@react-native-async-storage/async-storage'2import { QueryClient } from '@tanstack/preact-query'3import { PersistQueryClientProvider } from '@tanstack/preact-query-persist-client'4import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister'5 6const queryClient = new QueryClient({7 defaultOptions: {8 queries: {9 gcTime: 24 * 60 * 60 * 1000, // 24 hours10 },11 },12})13 14const asyncStoragePersister = createAsyncStoragePersister({15 storage: AsyncStorage,16})17 18const Root = () => (19 <PersistQueryClientProvider20 client={queryClient}21 persistOptions={{ persister: asyncStoragePersister }}22 >23 <App />24 </PersistQueryClientProvider>25)26 27export default Root重试
重试机制与 SyncStoragePersister 相同，区别在于它还支持异步重试。你也可以直接使用所有预定义的重试处理器。
API
createAsyncStoragePersister
调用该函数以创建一个 asyncStoragePersister，之后你可在 persistQueryClient 中使用它。
TypeScript
1createAsyncStoragePersister(options: CreateAsyncStoragePersisterOptions)Options
TypeScript
1interface CreateAsyncStoragePersisterOptions {2 /** The storage client used for setting an retrieving items from cache */3 storage: AsyncStorage | undefined | null4 /** The key to use when storing the cache to localStorage */5 key?: string6 /** To avoid localStorage 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) => MaybePromise<string>11 /** How to deserialize the data from storage */12 deserialize?: (cachedString: string) => MaybePromise<PersistedClient>13 /** How to retry persistence on error **/14 retry?: AsyncPersistRetryer15}16 17interface AsyncStorage<TStorageValue = string> {18 getItem: (key: string) => MaybePromise<TStorageValue | undefined | null>19 setItem: (key: string, value: TStorageValue) => MaybePromise<unknown>20 removeItem: (key: string) => MaybePromise<void>21 entries?: () => MaybePromise<Array<[key: string, value: TStorageValue]>>22}serialize 和 deserialize 回调可同步返回结果，也可异步返回 Promise。
默认选项为：
TypeScript
1{2 key = `REACT_QUERY_OFFLINE_CACHE`,3 throttleTime = 1000,4 serialize = JSON.stringify,5 deserialize = JSON.parse,6}