experimental_createQueryPersister

安装

此实用工具来自一个单独的包，可通过 '@tanstack/query-persist-client-core' 导入。

bash

npm install @tanstack/query-persist-client-core

npm install @tanstack/query-persist-client-core

或

bash

pnpm add @tanstack/query-persist-client-core

pnpm add @tanstack/query-persist-client-core

或

bash

yarn add @tanstack/query-persist-client-core

yarn add @tanstack/query-persist-client-core

或

bash

bun add @tanstack/query-persist-client-core

bun add @tanstack/query-persist-client-core

用法

导入 experimental_createQueryPersister 函数
创建一个新的 experimental_createQueryPersister
- 您可以将任何符合 AsyncStorage 或 Storage 接口的 storage 传递给它。
将此 persister 作为选项传递给您的 Query。这可以通过将其传递给 QueryClient 的 defaultOptions，或者传递给任何 useQuery hook 实例来完成。
- 如果您将此 persister 作为 defaultOptions 传递，所有查询都将被持久化到提供的 storage。您还可以通过传递 filters 来进一步缩小范围。与 persistClient 插件不同，它不会将整个 query client 作为一个单独的项来持久化，而是将每个查询单独持久化。查询哈希被用作键。
- 如果您将此 persister 提供给单个 useQuery hook，则只有该 Query 会被持久化。

这样，您就不需要存储整个 QueryClient，而是可以选择在应用程序中值得持久化的内容。每个查询都会被惰性恢复（当 Query 首次使用时）并在 queryFn 每次运行时持久化，因此不需要进行节流。恢复 Query 后也会尊重 staleTime，因此如果数据被认为是 stale，它将在恢复后立即重新获取。如果数据是 fresh，则 queryFn 将不会运行。

从内存中垃圾回收 Query 不会影响持久化的数据。这意味着 Query 可以更短地保留在内存中以获得更高的内存效率。如果它们在下次使用时，它们将再次从持久化存储中恢复。

tsx

import { QueryClient } from '@tanstack/vue-query'
import { experimental_createQueryPersister } from '@tanstack/query-persist-client-core'

const persister = experimental_createQueryPersister({
  storage: AsyncStorage,
  maxAge: 1000 * 60 * 60 * 12, // 12 hours
})

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      gcTime: 1000 * 30, // 30 seconds
      persister: persister.persisterFn,
    },
  },
})

import { QueryClient } from '@tanstack/vue-query'
import { experimental_createQueryPersister } from '@tanstack/query-persist-client-core'

const persister = experimental_createQueryPersister({
  storage: AsyncStorage,
  maxAge: 1000 * 60 * 60 * 12, // 12 hours
})

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      gcTime: 1000 * 30, // 30 seconds
      persister: persister.persisterFn,
    },
  },
})

调整默认值

createPersister 插件在技术上包装了 queryFn，因此如果 queryFn 不运行，它就不会恢复。这样，它就像 Query 和网络之间的缓存层。因此，当使用 persister 时，networkMode 默认为 'offlineFirst'，以便即使在没有网络连接的情况下也可以从持久化存储中恢复。

API

tsx

experimental_createQueryPersister(options: StoragePersisterOptions)

experimental_createQueryPersister(options: StoragePersisterOptions)

选项

tsx

export interface StoragePersisterOptions {
  /** The storage client used for setting and retrieving items from cache.
   * For SSR pass in `undefined`.
   */
  storage: AsyncStorage | Storage | undefined | null
  /**
   * How to serialize the data to storage.
   * @default `JSON.stringify`
   */
  serialize?: (persistedQuery: PersistedQuery) => string
  /**
   * How to deserialize the data from storage.
   * @default `JSON.parse`
   */
  deserialize?: (cachedString: string) => PersistedQuery
  /**
   * A unique string that can be used to forcefully invalidate existing caches,
   * if they do not share the same buster string
   */
  buster?: string
  /**
   * The max-allowed age of the cache in milliseconds.
   * If a persisted cache is found that is older than this
   * time, it will be discarded
   * @default 24 hours
   */
  maxAge?: number
  /**
   * Prefix to be used for storage key.
   * Storage key is a combination of prefix and query hash in a form of `prefix-queryHash`.
   */
  prefix?: string
  /**
   * Filters to narrow down which Queries should be persisted.
   */
  filters?: QueryFilters
}

interface AsyncStorage {
  getItem: (key: string) => Promise<string | undefined | null>
  setItem: (key: string, value: string) => Promise<unknown>
  removeItem: (key: string) => Promise<void>
}

export interface StoragePersisterOptions {
  /** The storage client used for setting and retrieving items from cache.
   * For SSR pass in `undefined`.
   */
  storage: AsyncStorage | Storage | undefined | null
  /**
   * How to serialize the data to storage.
   * @default `JSON.stringify`
   */
  serialize?: (persistedQuery: PersistedQuery) => string
  /**
   * How to deserialize the data from storage.
   * @default `JSON.parse`
   */
  deserialize?: (cachedString: string) => PersistedQuery
  /**
   * A unique string that can be used to forcefully invalidate existing caches,
   * if they do not share the same buster string
   */
  buster?: string
  /**
   * The max-allowed age of the cache in milliseconds.
   * If a persisted cache is found that is older than this
   * time, it will be discarded
   * @default 24 hours
   */
  maxAge?: number
  /**
   * Prefix to be used for storage key.
   * Storage key is a combination of prefix and query hash in a form of `prefix-queryHash`.
   */
  prefix?: string
  /**
   * Filters to narrow down which Queries should be persisted.
   */
  filters?: QueryFilters
}

interface AsyncStorage {
  getItem: (key: string) => Promise<string | undefined | null>
  setItem: (key: string, value: string) => Promise<unknown>
  removeItem: (key: string) => Promise<void>
}

默认选项为

tsx

{
  prefix = 'tanstack-query',
  maxAge = 1000 * 60 * 60 * 24,
  serialize = JSON.stringify,
  deserialize = JSON.parse,
}

{
  prefix = 'tanstack-query',
  maxAge = 1000 * 60 * 60 * 24,
  serialize = JSON.stringify,
  deserialize = JSON.parse,
}

experimental_createQueryPersister

安装

用法

调整默认值

API

experimental_createQueryPersister

选项

想跳过文档吗？

想跳过文档吗？