query/packages/svelte-query/tests/HydrationBoundary/BaseExample.svelte at 0c9d97f9f6f0bb85c49d6c1f8093393e6f3fd7b3 · TanStack/query · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<script lang="ts">
  import type { QueryClient } from '@tanstack/query-core'
  import {
    HydrationBoundary,
    createQuery,
    setQueryClientContext,
  } from '../../src/index.js'
  import type { DehydratedState } from '@tanstack/query-core'

  let {
    queryClient,
    dehydratedState,
    queryFn,
  }: {
    queryClient: QueryClient
    dehydratedState: DehydratedState
    queryFn: () => Promise<string>
  } = $props()

  setQueryClientContext(queryClient)

  const query = createQuery(() => ({
    queryKey: ['string'],
    queryFn,
  }))
</script>

<HydrationBoundary
  state={dehydratedState}
  options={undefined}
  queryClient={undefined}
>
  <div>data: {query.data ?? 'undefined'}</div>
</HydrationBoundary>