水合

dehydrate 创建一个 cache 的冻结表示，稍后可以使用 HydrationBoundary 或 hydrate 对其进行水合。这对于将预取查询从服务器传递到客户端或将查询持久化到 localStorage 或其他持久位置非常有用。默认情况下，它仅包含当前成功的查询。

import { dehydrate } from '@tanstack/vue-query'

const dehydratedState = dehydrate(queryClient, {
  shouldDehydrateQuery,
  shouldDehydrateMutation,
})

import { dehydrate } from '@tanstack/vue-query'

const dehydratedState = dehydrate(queryClient, {
  shouldDehydrateQuery,
  shouldDehydrateMutation,
})

选项

• client: QueryClient
  • 必需
  • 应进行脱水的 queryClient
• options: DehydrateOptions
  • 可选
  • shouldDehydrateMutation: (mutation: Mutation) => boolean
    • 可选
    • 是否对变更进行脱水。
    • 对缓存中的每个变更调用该函数
      • 如果要将此变更包含在脱水中，则返回 true，否则返回 false
    • 默认为仅包含暂停的变更
    • 如果您想在保留默认行为的同时扩展该函数，请导入并执行 defaultShouldDehydrateMutation 作为 return 语句的一部分
  • shouldDehydrateQuery: (query: Query) => boolean
    • 可选
    • 是否对查询进行脱水。
    • 对缓存中的每个查询调用该函数
      • 如果要将此查询包含在脱水中，则返回 true，否则返回 false
    • 默认为仅包含成功的查询
    • 如果您想在保留默认行为的同时扩展该函数，请导入并执行 defaultShouldDehydrateQuery 作为 return 语句的一部分
  • serializeData?: (data: any) => any 一个用于在脱水期间转换（序列化）数据的函数。
  • shouldRedactErrors?: (error: unknown) => boolean
    • 可选
    • 是否在脱水期间编辑来自服务器的错误。
    • 对缓存中的每个错误调用该函数
      • 如果要编辑此错误，则返回 true，否则返回 false
    • 默认为编辑所有错误

返回值

• dehydratedState: DehydratedState
  • 其中包含稍后对 queryClient 进行水���所需的一切
  • 您不应依赖此响应的确切格式，它不是公共 API 的一部分，并且可能随时更改
  • 此结果未序列化，如果需要，您需要自己进行序列化

某些存储系统（例如浏览器 Web Storage API）要求值是 JSON 可序列化的。如果您需要脱水无法自动序列化为 JSON 的值（例如 Error 或 undefined），则必须自己进行序列化。由于默认情况下仅包含成功的查询，因此要同时包含 Errors，您必须提供 shouldDehydrateQuery，例如：

// 服务器
const state = dehydrate(client, { shouldDehydrateQuery: () => true }) // 同时也包含错误
const serializedState = mySerialize(state) // 将 Error 实例转换为对象

// 客户端
const state = myDeserialize(serializedState) // 将对象转换回 Error 实例
hydrate(client, state)

// 服务器
const state = dehydrate(client, { shouldDehydrateQuery: () => true }) // 同时也包含错误
const serializedState = mySerialize(state) // 将 Error 实例转换为对象

// 客户端
const state = myDeserialize(serializedState) // 将对象转换回 Error 实例
hydrate(client, state)

hydrate 将先前脱水的状态添加到 cache 中。

import { hydrate } from '@tanstack/vue-query'

hydrate(queryClient, dehydratedState, options)

import { hydrate } from '@tanstack/vue-query'

hydrate(queryClient, dehydratedState, options)

选项

• client: QueryClient
  • 必需
  • 要将状态水合到其中的 queryClient
• dehydratedState: DehydratedState
  • 必需
  • 要水合到客户端中的状态
• options: HydrateOptions
  • 可选
  • defaultOptions: DefaultOptions
    • 可选
    • mutations: MutationOptions 用于水合变更的默认变更选项。
    • queries: QueryOptions 用于水合查询的默认查询选项。
    • deserializeData?: (data: any) => any 一个用于在将数据放入缓存之前转换（反序列化）数据的函数。
  • queryClient?: QueryClient,
    • 使用此选项可使用自定义 QueryClient。否则，将使用最近上下文中的 QueryClient。

如果您尝试水合的查询已存在于 queryCache 中，则 hydrate 仅在数据比缓存中存在的数据更新时才会覆盖它们。否则，它将不会被应用。