useHydrate
TypeScript
1function useHydrate(2 state?: unknown, 3 options?: HydrateOptions, 4 queryClient?: QueryClient5): void;定义于：packages/svelte-query/src/useHydrate.ts:31
将先前脱水（dehydrate）的 state 添加到 queryClient 中（来自最近的上下文，或显式传入的 queryClient）。如果客户端已包含数据，新查询会基于更新时间戳智能合并。HydrationBoundary 封装了此功能 — 仅当你需要从自己的组件中执行注水时，才直接使用它。
参数
state?
unknown
要注入缓存的脱水状态，由 dehydrate 生成。
options?
HydrateOptions 类型，用于控制注水行为。
options 属性
| 属性 | 类型 | 描述 |
|---|---|---|
defaultOptions? |
object |
应用于从脱水状态恢复的查询和修改的选项。 |
defaultOptions.deserializeData? |
TransformerFn |
在查询的 data 从脱水状态读取后对其进行转换，以逆向处理 serializeData。 |
defaultOptions.mutations? |
MutationOptions<unknown, Error, unknown, unknown> |
合并到每个从脱水状态恢复的修改中的默认选项。 |
defaultOptions.queries? |
QueryOptions<unknown, Error, unknown, readonly unknown[], never> |
合并到每个从脱水状态恢复的查询中的默认选项。 |
queryClient?
使用此参数可指定自定义 QueryClient；否则将使用最近上下文中的 QueryClient。
返回值
void
示例
服务端预取的数据通过 dehydrate 传递给客户端 — dehydratedState 通常来自一个服务端 load 函数，该函数使用 queryClient.query 预取数据并调用 dehydrate(queryClient)：
svelte
1<script lang="ts">2 import { HydrationBoundary } from '@tanstack/svelte-query'3 import type { DehydratedState } from '@tanstack/svelte-query'4 import Posts from './Posts.svelte'5 6 let { dehydratedState }: { dehydratedState: DehydratedState } = $props()7</script>8 9<HydrationBoundary state={dehydratedState}>10 <Posts />11</HydrationBoundary>