refactor(svelte-query/HydrationBoundary): create 'QueryClient' inside component instead of receiving via props

Author: sukvvon

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>

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()
   })
 })