createAsyncStoragePersister

安装

此实用程序作为一个单独的包提供，可通过 '@tanstack/query-async-storage-persister' 导入。

bash

npm install @tanstack/query-async-storage-persister @tanstack/react-query-persist-client

npm install @tanstack/query-async-storage-persister @tanstack/react-query-persist-client

或者

bash

pnpm add @tanstack/query-async-storage-persister @tanstack/react-query-persist-client

pnpm add @tanstack/query-async-storage-persister @tanstack/react-query-persist-client

或者

bash

yarn add @tanstack/query-async-storage-persister @tanstack/react-query-persist-client

yarn add @tanstack/query-async-storage-persister @tanstack/react-query-persist-client

或者

bash

bun add @tanstack/query-async-storage-persister @tanstack/react-query-persist-client

bun add @tanstack/query-async-storage-persister @tanstack/react-query-persist-client

用法

导入 createAsyncStoragePersister 函数
创建一个新的 asyncStoragePersister
- 您可以向其传递任何符合 AsyncStorage 接口的 storage - 下面的示例使用来自 React Native 的 async-storage。
- 同步读取和写入的存储（例如 window.localstorage）也符合 AsyncStorage 接口，因此也可以与 createAsyncStoragePersister 一起使用。
使用 PersistQueryClientProvider 组件包装您的应用程序。

tsx

import AsyncStorage from '@react-native-async-storage/async-storage'
import { QueryClient } from '@tanstack/react-query'
import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client'
import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister'

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      gcTime: 1000 * 60 * 60 * 24, // 24 小时
    },
  },
})

const asyncStoragePersister = createAsyncStoragePersister({
  storage: AsyncStorage,
})

const Root = () => (
  <PersistQueryClientProvider
    client={queryClient}
    persistOptions={{ persister: asyncStoragePersister }}
  >
    <App />
  </PersistQueryClientProvider>
)

export default Root

import AsyncStorage from '@react-native-async-storage/async-storage'
import { QueryClient } from '@tanstack/react-query'
import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client'
import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister'

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      gcTime: 1000 * 60 * 60 * 24, // 24 小时
    },
  },
})

const asyncStoragePersister = createAsyncStoragePersister({
  storage: AsyncStorage,
})

const Root = () => (
  <PersistQueryClientProvider
    client={queryClient}
    persistOptions={{ persister: asyncStoragePersister }}
  >
    <App />
  </PersistQueryClientProvider>
)

export default Root

重试

重试的工作方式与 SyncStoragePersister 相同，只是它们也可以是异步的。您还可以使用所有预定义的重试处理程序。

API

createAsyncStoragePersister

调用此函数以创建一个 asyncStoragePersister，您稍后可以将其与 persistQueryClient 一起使用。

tsx

createAsyncStoragePersister(options: CreateAsyncStoragePersisterOptions)

createAsyncStoragePersister(options: CreateAsyncStoragePersisterOptions)

选项

tsx

interface CreateAsyncStoragePersisterOptions {
  /** 用于从缓存中设置和检索项目的存储客户端 */
  storage: AsyncStorage | undefined | null
  /** 存储缓存到 localStorage 时使用的键 */
  key?: string
  /** 为避免 localStorage 垃圾邮件，
   * 传递一个以毫秒为单位的时间来限制将缓存保存到磁盘的频率 */
  throttleTime?: number
  /** 如何将数据序列化到存储 */
  serialize?: (client: PersistedClient) => string
  /** 如何从存储中反序列化数据 */
  deserialize?: (cachedString: string) => PersistedClient
  /** 如何在出错时重试持久化 **/
  retry?: AsyncPersistRetryer
}

interface AsyncStorage<TStorageValue = string> {
  getItem: (key: string) => MaybePromise<TStorageValue | undefined | null>
  setItem: (key: string, value: TStorageValue) => MaybePromise<unknown>
  removeItem: (key: string) => MaybePromise<void>
  entries?: () => MaybePromise<Array<[key: string, value: TStorageValue]>>
}

interface CreateAsyncStoragePersisterOptions {
  /** 用于从缓存中设置和检索项目的存储客户端 */
  storage: AsyncStorage | undefined | null
  /** 存储缓存到 localStorage 时使用的键 */
  key?: string
  /** 为避免 localStorage 垃圾邮件，
   * 传递一个以毫秒为单位的时间来限制将缓存保存到磁盘的频率 */
  throttleTime?: number
  /** 如何将数据序列化到存储 */
  serialize?: (client: PersistedClient) => string
  /** 如何从存储中反序列化数据 */
  deserialize?: (cachedString: string) => PersistedClient
  /** 如何在出错时重试持久化 **/
  retry?: AsyncPersistRetryer
}

interface AsyncStorage<TStorageValue = string> {
  getItem: (key: string) => MaybePromise<TStorageValue | undefined | null>
  setItem: (key: string, value: TStorageValue) => MaybePromise<unknown>
  removeItem: (key: string) => MaybePromise<void>
  entries?: () => MaybePromise<Array<[key: string, value: TStorageValue]>>
}

默认选项是：

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,
}