hydration

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 作为返回语句的一部分
  • shouldDehydrateQuery: (query: Query) => boolean
    • 可选
    • 是否要脱水查询。
    • 该函数为缓存中的每个查询调用
      • 返回 true 以将此查询包含在脱水中，否则返回 false
    • 默认为仅包含成功的查询
    • 如果您想扩展该函数，同时保留默认行为，请导入并执行 defaultShouldDehydrateQuery 作为返回语句的一部分
  • serializeData?: (data: any) => any 用于在脱水期间转换（序列化）数据的函数。
  • shouldRedactErrors?: (error: unknown) => boolean
    • 可选
    • 是否在脱水期间编辑服务器的错误。
    • 该函数为缓存中的每个错误调用
      • 返回 true 以编辑此错误，否则返回 false
    • 默认为编辑所有错误

返回值

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

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

// server
const state = dehydrate(client, { shouldDehydrateQuery: () => true }) // to also include Errors
const serializedState = mySerialize(state) // transform Error instances to objects

// client
const state = myDeserialize(serializedState) // transform objects back to Error instances
hydrate(client, state)

// server
const state = dehydrate(client, { shouldDehydrateQuery: () => true }) // to also include Errors
const serializedState = mySerialize(state) // transform Error instances to objects

// client
const state = myDeserialize(serializedState) // transform objects back to Error instances
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 才会覆盖它们。否则，它将不会被应用。