HydrationBoundary
TypeScript
1function HydrationBoundary(props: HydrationBoundaryProps): ReactElement<unknown, string | JSXElementConstructor<any>>;定义位置：packages/react-query/src/HydrationBoundary.tsx:85
HydrationBoundary 将先前脱水（dehydrate）的状态注入 queryClient，该状态由 useQueryClient() 返回。若客户端已包含数据，则新查询会基于更新时间戳智能合并。
注意：仅 queries 可通过 HydrationBoundary 进行脱水。
参数
props
待注水的 state、注水 options、可选的自定义 queryClient，以及待渲染的 children。
props 属性
| 属性 | 类型 | 描述 |
|---|---|---|
children? |
ReactNode |
待渲染的组件 — 始终无条件渲染，不以注水完成为前提。新查询在渲染期间注入缓存；对于缓存中已存在的查询，仅注入更新时间戳更新的脱水数据，且该操作发生在提交后的 effect 中，因此 children 可能短暂渲染后再被替换。 |
options? |
OmitKeyof<HydrateOptions, "defaultOptions"> & object |
可选。注意：与 hydrate 不同，此处无法设置 mutations。 |
queryClient? |
QueryClient |
用于指定自定义 QueryClient；否则将使用最近上下文中的 QueryClient。 |
state |
DehydratedState | null | undefined |
待注水的状态。 |
返回值
ReactElement<unknown, string | JSXElementConstructor<any>>
无条件渲染所提供的 children。state 中的新查询在渲染期间注入缓存；对于缓存中已存在的查询，仅在提交后的 effect 中注入更新时间戳更新的脱水数据。
示例
TypeScript
1import { HydrationBoundary } from '@tanstack/react-query'2 3function App() {4 return <HydrationBoundary state={dehydratedState}>...</HydrationBoundary>5}通过 dehydrate 将服务端预取的数据传递给客户端：
TypeScript
1import { HydrationBoundary, dehydrate, noop } from '@tanstack/react-query'2 3async function ServerComponent() {4 const queryClient = getQueryClient()5 6 await queryClient7 .query({8 queryKey: ['posts'],9 queryFn: fetchPosts,10 })11 .catch(noop)12 13 return (14 <HydrationBoundary state={dehydrate(queryClient)}>15 <Posts />16 </HydrationBoundary>17 )18}