HydrationBoundary

function HydrationBoundary(__namedParameters): Element;

정의 위치: preact-query/src/HydrationBoundary.tsx:87

HydrationBoundary는 이전에 디하이드레이션된 상태를 다음에서 반환될 queryClient에 추가합니다 useQueryClient(). 클라이언트에 데이터가 이미 포함되어 있다면 새 쿼리는 다음을 기준으로 지능적으로 병합됩니다 타임스탬프를 업데이트합니다.

참고: queries만 HydrationBoundary를 사용하여 디하이드레이션할 수 있습니다.

매개변수

__namedParameters

HydrationBoundaryProps

반환값

Element

제공된 children이며 조건 없이 렌더링됩니다. state의 새 쿼리는 다음으로 하이드레이션됩니다 렌더링 중 캐시합니다. 이미 캐시에 있는 쿼리의 경우 더 새로운 디하이드레이션된 데이터만 effect에서 하이드레이션됩니다 커밋 후.

예시

import { HydrationBoundary } from '@tanstack/preact-query'

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

dehydrate를 통해 클라이언트로 전달되는 서버 측 프리페치:

import { HydrationBoundary, dehydrate, noop } from '@tanstack/preact-query'

async function ServerComponent() {
  const queryClient = getQueryClient()

  await queryClient
    .query({
      queryKey: ['posts'],
      queryFn: fetchPosts,
    })
    .catch(noop)

  return (
    <HydrationBoundary state={dehydrate(queryClient)}>
      <Posts />
    </HydrationBoundary>
  )
}