experimental_createPersister

安装

此实用程序作为一个单独的包提供，并且可以通过 '@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_createPersister 函数
创建一个新的 experimental_createPersister
- 你可以传递任何符合 AsyncStorage 或 Storage 接口的 storage 给它
将该 persister 作为选项传递给你的 Query。这可以通过将其传递给 QueryClient 的 defaultOptions 或任何 useQuery hook 实例来完成。
- 如果你将此 persister 作为 defaultOptions 传递，则所有查询都将持久化到提供的 storage 中。你还可以通过传递 filters 来进一步缩小范围。与 persistClient 插件相比，这不会将整个查询客户端作为单个项目持久化，而是单独持久化每个查询。查询哈希用作键。
- 如果你将此 persister 提供给单个 useQuery hook，则只有此 Query 将被持久化。

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

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

tsx

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

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      gcTime: 1000 * 30, // 30 seconds
      persister: experimental_createPersister({
        storage: localStorage,
        maxAge: 1000 * 60 * 60 * 12, // 12 hours
      }),
    },
  },
})

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

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      gcTime: 1000 * 30, // 30 seconds
      persister: experimental_createPersister({
        storage: localStorage,
        maxAge: 1000 * 60 * 60 * 12, // 12 hours
      }),
    },
  },
})

调整后的默认值

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

API

tsx

experimental_createPersister(options: StoragePersisterOptions)

experimental_createPersister(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_createPersister

安装

用法

调整后的默认值

API

experimental_createPersister

选项

想跳过文档吗？

想跳过文档吗？