From d4a7688bb28ec7e1bc381a9d96a1a3a21a3a6757 Mon Sep 17 00:00:00 2001
From: Wonsuk Choi <sukvvon@gmail.com>
Date: Tue, 24 Feb 2026 13:47:10 +0900
Subject: [PATCH 1/2] test(svelte-query/HydrationBoundary): add test for
 hydrating queries to the cache on context

---
 .../HydrationBoundary/BaseExample.svelte      | 30 +++++++++++++
 .../HydrationBoundary.svelte.test.ts          | 44 +++++++++++++++++++
 2 files changed, 74 insertions(+)
 create mode 100644 packages/svelte-query/tests/HydrationBoundary/BaseExample.svelte
 create mode 100644 packages/svelte-query/tests/HydrationBoundary/HydrationBoundary.svelte.test.ts

diff --git a/packages/svelte-query/tests/HydrationBoundary/BaseExample.svelte b/packages/svelte-query/tests/HydrationBoundary/BaseExample.svelte
new file mode 100644
index 00000000000..e579b4e5092
--- /dev/null
+++ b/packages/svelte-query/tests/HydrationBoundary/BaseExample.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+  import { 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>
diff --git a/packages/svelte-query/tests/HydrationBoundary/HydrationBoundary.svelte.test.ts b/packages/svelte-query/tests/HydrationBoundary/HydrationBoundary.svelte.test.ts
new file mode 100644
index 00000000000..5f048b2da96
--- /dev/null
+++ b/packages/svelte-query/tests/HydrationBoundary/HydrationBoundary.svelte.test.ts
@@ -0,0 +1,44 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { render } from '@testing-library/svelte'
+import { QueryClient, dehydrate } from '@tanstack/query-core'
+import { sleep } from '@tanstack/query-test-utils'
+import BaseExample from './BaseExample.svelte'
+
+describe('HydrationBoundary', () => {
+  let stringifiedState: string
+
+  beforeEach(async () => {
+    vi.useFakeTimers()
+    const queryClient = new QueryClient()
+    queryClient.prefetchQuery({
+      queryKey: ['string'],
+      queryFn: () => sleep(10).then(() => 'stringCached'),
+    })
+    await vi.advanceTimersByTimeAsync(10)
+    const dehydrated = dehydrate(queryClient)
+    stringifiedState = JSON.stringify(dehydrated)
+    queryClient.clear()
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  it('should hydrate queries to the cache on context', async () => {
+    const dehydratedState = JSON.parse(stringifiedState)
+    const queryClient = new QueryClient()
+
+    const rendered = render(BaseExample, {
+      props: {
+        queryClient,
+        dehydratedState,
+        queryFn: () => sleep(20).then(() => 'string'),
+      },
+    })
+
+    expect(rendered.getByText('data: stringCached')).toBeInTheDocument()
+    await vi.advanceTimersByTimeAsync(21)
+    expect(rendered.getByText('data: string')).toBeInTheDocument()
+    queryClient.clear()
+  })
+})

From 1afcfd1dbc6d4f805f8df3f56714622ca990c9a0 Mon Sep 17 00:00:00 2001
From: Wonsuk Choi <sukvvon@gmail.com>
Date: Tue, 24 Feb 2026 14:04:45 +0900
Subject: [PATCH 2/2] refactor(svelte-query/HydrationBoundary): create
 'QueryClient' inside component instead of receiving via props

---
 .../tests/HydrationBoundary/BaseExample.svelte           | 9 ++++++---
 .../HydrationBoundary/HydrationBoundary.svelte.test.ts   | 3 ---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/svelte-query/tests/HydrationBoundary/BaseExample.svelte b/packages/svelte-query/tests/HydrationBoundary/BaseExample.svelte
index e579b4e5092..59930aab542 100644
--- a/packages/svelte-query/tests/HydrationBoundary/BaseExample.svelte
+++ b/packages/svelte-query/tests/HydrationBoundary/BaseExample.svelte
@@ -8,15 +8,14 @@
   import type { DehydratedState } from '@tanstack/query-core'
 
   let {
-    queryClient,
     dehydratedState,
     queryFn,
   }: {
-    queryClient: QueryClient
     dehydratedState: DehydratedState
     queryFn: () => Promise<string>
   } = $props()
 
+  const queryClient = new QueryClient()
   setQueryClientContext(queryClient)
 
   const query = createQuery(() => ({
@@ -25,6 +24,10 @@
   }))
 </script>
 
-<HydrationBoundary state={dehydratedState} options={undefined} queryClient={undefined}>
+<HydrationBoundary
+  state={dehydratedState}
+  options={undefined}
+  queryClient={undefined}
+>
   <div>data: {query.data ?? 'undefined'}</div>
 </HydrationBoundary>
diff --git a/packages/svelte-query/tests/HydrationBoundary/HydrationBoundary.svelte.test.ts b/packages/svelte-query/tests/HydrationBoundary/HydrationBoundary.svelte.test.ts
index 5f048b2da96..4e6c857e4e6 100644
--- a/packages/svelte-query/tests/HydrationBoundary/HydrationBoundary.svelte.test.ts
+++ b/packages/svelte-query/tests/HydrationBoundary/HydrationBoundary.svelte.test.ts
@@ -26,11 +26,9 @@ describe('HydrationBoundary', () => {
 
   it('should hydrate queries to the cache on context', async () => {
     const dehydratedState = JSON.parse(stringifiedState)
-    const queryClient = new QueryClient()
 
     const rendered = render(BaseExample, {
       props: {
-        queryClient,
         dehydratedState,
         queryFn: () => sleep(20).then(() => 'string'),
       },
@@ -39,6 +37,5 @@ describe('HydrationBoundary', () => {
     expect(rendered.getByText('data: stringCached')).toBeInTheDocument()
     await vi.advanceTimersByTimeAsync(21)
     expect(rendered.getByText('data: string')).toBeInTheDocument()
-    queryClient.clear()
   })
 })