hydration – Quaere

`dehydrate`

dehydrate 创建一个 cache 的冻结状态，以后可以使用 HydrationBoundary 或 hydrate 进行还原。这对于将预取的查询从服务器传递到客户端或将查询持久化非常有用。默认情况下，它只包括当前成功的查询。

import { dehydrate } from "quaere";
 
const dehydratedState = dehydrate(queryClient, {
  shouldDehydrateQuery,
});

选项

client: QueryClient
- 必填
- 应该被脱水的 queryClient
options: DehydrateOptions
- shouldDehydrateQuery: boolean | (query: Query) => boolean
  - 是否脱水 queries。
  - 该函数对缓存中的每个查询调用
  - 返回 true 表示将此查询包含在脱水中，否则返回 false
  - 默认情况下仅包括成功的 queries
  - 如果您希望扩展该函数同时保留默认行为，请导入并在返回语句中执行 defaultShouldDehydrateQuery

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

注意事项

如果你需要脱水一个 query，你必须给设置选项 key。如果没有设置 key，query 将不会被脱水。

// 该 query 无法被脱水
const query1 = query({
  fetcher: () => fetch("xxx"),
});
 
// 该 query 可以被脱水
const query2 = query({
  key: "query2",
  fetcher: () => fetch("xxx"),
});
 
const dehydratedState = dehydrate(queryClient);
// dehydratedState 内只包含 query2 相关的查询
console.log(dehydratedState);

某些存储系统（例如浏览器的 Web Storage API (opens in a new tab)）要求值可以序列化为 JSON。如果您需要脱水无法自动序列化为 JSON 的值（如 Error 或 undefined），则必须自己对它们进行序列化。由于默认情况下只包括成功的 queries，要包括 Errors，您必须提供 shouldDehydrateQuery，例如：

// 服务器
const state = dehydrate(client, { shouldDehydrateQuery: () => true }); // 也包括 Errors
const serializedState = mySerialize(state); // 将 Error 实例转换为对象
 
// 客户端
const state = myDeserialize(serializedState); // 将对象转换回 Error 实例
hydrate(client, state);

`hydrate`

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

import { hydrate } from "quaere";
 
hydrate(queryClient, dehydratedState, options);

选项

client: QueryClient
- 必填
- 将状态还原到的 queryClient
dehydratedState: DehydratedState
- 必填
- 要还原到客户端的状态
options: HydrateOptions
- 可选
- defaultOptions: DefaultOptions
  - 可选
  - queries: QueryOptions 用于脱水的 queries 的默认选项。
- queryClient?: QueryClient,
  - 使用此选项来使用自定义的 QueryClient。否则，将使用最近上下文中的 QueryClient。

注意事项

如果脱水中包括的 queries 已经存在于 queryCache 中，hydrate 不会覆盖它们，它们将悄悄被丢弃。

`HydrationBoundary`

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

import { HydrationBoundary } from "quaere";
 
function App() {
  return <HydrationBoundary state={dehydratedState}>...</HydrationBoundary>;
}

选项

state: DehydratedState
- 要还原的状态
options: HydrateOptions
- 可选
- defaultOptions: QueryOptions
  - 用于脱水的 queries 的默认选项。
- queryClient?: QueryClient,
  - 使用此选项来使用自定义的 QueryClient。否则，将使用最近上下文中的 QueryClient。

Typescript useQueries