Skip to main content

hydration

dehydrate​

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

import { dehydrate } from "@tanstack/react-query";

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

Options​

  • client: QueryClient

    - 必须的
    - 应该脱水 queryClient 的

  • options: DehydrateOptions

    • 自选
    • dehydrateMutations: boolean
      • 自选
      • 是否脱水突变
    • dehydrateQueries: boolean
      • 自选
      • 是否冻结查询
    • shouldDehydrateMutation: (mutation: Mutation) => boolean
      • 自选
      • 为缓存中的每个突变调用此函数
      • 返回 true 以脱水或其他 false 情况下包括此突变
      • 默认版本仅包含暂停的突变
      • 如果要在保留先前行为的同时扩展函数，请作为 return 语句的一部分导入并执行 defaultShouldDehydrateMutation 函数
    • shouldDehydrateQuery: (query: Query) => boolean
      • 自选
      • 为缓存中的每个查询调用此函数
      • 返回 true 以脱水或其他 false 情况下包括此查询
      • 默认版本仅包含成功的查询, shouldDehydrateQuery: () => true 要包括所有查询
      • 如果要在保留先前行为的同时扩展函数，请作为 return 语句的一部分导入并执行 defaultShouldDehydrateQuery

Returns​

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

limitations 局限性​

某些存储系统（如浏览器 Web 存储 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);

hydrate​

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

import { hydrate } from "@tanstack/react-query";

hydrate(queryClient, dehydratedState, options);

Options​

  • client: QueryClient

    • 必填
    • 将 queryClient 状态水和

  • dehydratedState: DehydratedState

    • 必填
    • 要水合到客户端的状态

  • options: HydrateOptions

    • 自选
    • defaultOptions: DefaultOptions
      • 自选
      • mutations: MutationOptions 用于水合突变的默认突变选项
      • queries: QueryOptions 用于水合查询的默认查询选项
    • context?: React.Context<QueryClient | undefined>
      • 使用它来使用自定义 React Query 上下文。否则，将使用defaultContext。

Limitations 局限性​

如果冻结中包含的查询已存在于 queryCache 中，则不会覆盖它们， hydrate 它们将被静默丢弃。

useHydrate​

useHydrate 将先前的脱水状态添加到将由 返回 useQueryClient() 的 中 queryClient 。如果客户端已包含数据，则新查询将根据更新时间戳智能合并。

import { useHydrate } from "@tanstack/react-query";

useHydrate(dehydratedState, options);

Options​

  • dehydratedState: DehydratedState

    • 必填
    • 水合状态

  • options: HydrateOptions

    • 自选

    • defaultOptions: DefaultOptions

      • 用于水合查询的默认查询选项。

    • context?: React.Context<QueryClient | undefined>

      • 使用它来使用自定义 React Query 上下文。否则，将使用defaultContext。

Hydrate​

Hydrate 换 useHydrate 行到组件中。当您在类组件中需要水合物或需要在渲染的相同 QueryClientProvider 级别上补水时，可能很有用。

import { Hydrate } from "@tanstack/react-query";

function App() {
  return <Hydrate state={dehydratedState}>...</Hydrate>;
}

Options​

  • state: DehydratedState
    • 补水状态
  • options: HydrateOptions
    • 自选
    • defaultOptions: DefaultOptions
      • 用于水合查询的默认查询选项。
    • context?: React.Context<QueryClient | undefined>
      • 使用它来使用自定义 React Query 上下文。否则，将使用defaultContext。