[pull] main from TanStack:main

packages/svelte-query/tests/HydrationBoundary/BaseExample.svelte

@@ -1,21 +1,20 @@
 <script lang="ts">
-  import { QueryClient } from '@tanstack/query-core'
+  import type { QueryClient } from '@tanstack/query-core'
   import {
     HydrationBoundary,
     createQuery,
     setQueryClientContext,
   } from '../../src/index.js'
   import type { DehydratedState } from '@tanstack/query-core'
 
-  let {
-    dehydratedState,
-    queryFn,
-  }: {
+  type Props = {
+    queryClient: QueryClient
     dehydratedState: DehydratedState
     queryFn: () => Promise<string>
-  } = $props()
+  }
+
+  let { queryClient, dehydratedState, queryFn }: Props = $props()
 
-  const queryClient = new QueryClient()
   setQueryClientContext(queryClient)
 
   const query = createQuery(() => ({

packages/svelte-query/tests/HydrationBoundary/HydrationBoundary.svelte.test.ts

@@ -5,22 +5,25 @@ import { sleep } from '@tanstack/query-test-utils'
 import BaseExample from './BaseExample.svelte'
 
 describe('HydrationBoundary', () => {
+  let queryClient: QueryClient
   let stringifiedState: string
 
   beforeEach(async () => {
     vi.useFakeTimers()
-    const queryClient = new QueryClient()
-    queryClient.prefetchQuery({
+    queryClient = new QueryClient()
+    const dehydrateClient = new QueryClient()
+    dehydrateClient.prefetchQuery({
       queryKey: ['string'],
       queryFn: () => sleep(10).then(() => 'stringCached'),
     })
     await vi.advanceTimersByTimeAsync(10)
-    const dehydrated = dehydrate(queryClient)
+    const dehydrated = dehydrate(dehydrateClient)
     stringifiedState = JSON.stringify(dehydrated)
-    queryClient.clear()
+    dehydrateClient.clear()
   })
 
   afterEach(() => {
+    queryClient.clear()
     vi.useRealTimers()
   })
 
@@ -29,6 +32,7 @@ describe('HydrationBoundary', () => {
 
     const rendered = render(BaseExample, {
       props: {
+        queryClient,
         dehydratedState,
         queryFn: () => sleep(20).then(() => 'string'),
       },

packages/svelte-query/tests/QueryClientProvider/BaseExample.svelte

@@ -3,7 +3,11 @@
   import QueryChild from './QueryChild.svelte'
   import type { QueryClient } from '@tanstack/query-core'
 
-  let { queryClient }: { queryClient: QueryClient } = $props()
+  type Props = {
+    queryClient: QueryClient
+  }
+
+  let { queryClient }: Props = $props()
 </script>
 
 <QueryClientProvider client={queryClient}>

packages/svelte-query/tests/QueryClientProvider/QueryClientProvider.svelte.test.ts

@@ -4,21 +4,24 @@ import { QueryClient } from '@tanstack/query-core'
 import BaseExample from './BaseExample.svelte'
 
 describe('QueryClientProvider', () => {
+  let queryClient: QueryClient
+
   beforeEach(() => {
     vi.useFakeTimers()
+    queryClient = new QueryClient()
   })
 
   afterEach(() => {
+    queryClient.clear()
     vi.useRealTimers()
   })
 
   test('Sets a specific cache for all queries to use', async () => {
-    const queryClient = new QueryClient()
     const queryCache = queryClient.getQueryCache()
 
     const rendered = render(BaseExample, {
       props: {
-        queryClient: queryClient,
+        queryClient,
       },
     })
 

packages/svelte-query/tests/createInfiniteQuery/BaseExample.svelte

@@ -1,14 +1,17 @@
 <script lang="ts">
   import { untrack } from 'svelte'
-  import { QueryClient } from '@tanstack/query-core'
   import { queryKey, sleep } from '@tanstack/query-test-utils'
   import { createInfiniteQuery } from '../../src/index.js'
   import { setQueryClientContext } from '../../src/context.js'
-  import type { QueryObserverResult } from '@tanstack/query-core'
+  import type { QueryClient, QueryObserverResult } from '@tanstack/query-core'
 
-  let { states }: { states: { value: Array<QueryObserverResult> } } = $props()
+  type Props = {
+    queryClient: QueryClient
+    states: { value: Array<QueryObserverResult> }
+  }
+
+  let { queryClient, states }: Props = $props()
 
-  const queryClient = new QueryClient()
   setQueryClientContext(queryClient)
 
   const query = createInfiniteQuery(() => ({
@@ -20,7 +23,6 @@
 
   $effect(() => {
     // @ts-expect-error
-    // svelte-ignore state_snapshot_uncloneable
     states.value = [...untrack(() => states.value), $state.snapshot(query)]
   })
 </script>

packages/svelte-query/tests/createInfiniteQuery/ChangeClientExample.svelte

@@ -4,7 +4,11 @@
   import { setQueryClientContext } from '../../src/context.js'
   import { sleep } from '@tanstack/query-test-utils'
 
-  let { queryClient }: { queryClient: QueryClient } = $props()
+  type Props = {
+    queryClient: QueryClient
+  }
+
+  let { queryClient }: Props = $props()
 
   const queryKey = ['test']
 

packages/svelte-query/tests/createInfiniteQuery/SelectExample.svelte

@@ -1,14 +1,17 @@
 <script lang="ts">
   import { untrack } from 'svelte'
-  import { QueryClient } from '@tanstack/query-core'
   import { createInfiniteQuery } from '../../src/index.js'
   import { setQueryClientContext } from '../../src/context.js'
-  import type { QueryObserverResult } from '@tanstack/query-core'
+  import type { QueryClient, QueryObserverResult } from '@tanstack/query-core'
   import { queryKey, sleep } from '@tanstack/query-test-utils'
 
-  let { states }: { states: { value: Array<QueryObserverResult> } } = $props()
+  type Props = {
+    queryClient: QueryClient
+    states: { value: Array<QueryObserverResult> }
+  }
+
+  let { queryClient, states }: Props = $props()
 
-  const queryClient = new QueryClient()
   setQueryClientContext(queryClient)
 
   const query = createInfiniteQuery(() => ({
@@ -24,7 +27,6 @@
 
   $effect(() => {
     // @ts-expect-error
-    // svelte-ignore state_snapshot_uncloneable
     states.value = [...untrack(() => states.value), $state.snapshot(query)]
   })
 </script>

packages/svelte-query/tests/createInfiniteQuery/createInfiniteQuery.svelte.test.ts

@@ -8,11 +8,15 @@ import ChangeClientExample from './ChangeClientExample.svelte'
 import type { QueryObserverResult } from '@tanstack/query-core'
 
 describe('createInfiniteQuery', () => {
+  let queryClient: QueryClient
+
   beforeEach(() => {
     vi.useFakeTimers()
+    queryClient = new QueryClient()
   })
 
   afterEach(() => {
+    queryClient.clear()
     vi.useRealTimers()
   })
 
@@ -21,6 +25,7 @@ describe('createInfiniteQuery', () => {
 
     const rendered = render(BaseExample, {
       props: {
+        queryClient,
         states,
       },
     })
@@ -110,6 +115,7 @@ describe('createInfiniteQuery', () => {
 
     const rendered = render(SelectExample, {
       props: {
+        queryClient,
         states,
       },
     })
@@ -131,8 +137,6 @@ describe('createInfiniteQuery', () => {
   })
 
   it('should be able to set new pages with the query client', async () => {
-    const queryClient = new QueryClient()
-
     const rendered = render(ChangeClientExample, {
       props: {
         queryClient,

packages/svelte-query/tests/createMutation/FailureExample.svelte

@@ -1,15 +1,16 @@
 <script lang="ts">
-  import { QueryClient } from '@tanstack/query-core'
+  import type { QueryClient } from '@tanstack/query-core'
   import { createMutation, setQueryClientContext } from '../../src/index.js'
 
-  let {
-    mutationFn,
-  }: { mutationFn: (value: { count: number }) => Promise<{ count: number }> } =
-    $props()
+  type Props = {
+    queryClient: QueryClient
+    mutationFn: (value: { count: number }) => Promise<{ count: number }>
+  }
+
+  let { queryClient, mutationFn }: Props = $props()
 
   let count = $state(0)
 
-  const queryClient = new QueryClient()
   setQueryClientContext(queryClient)
 
   const mutation = createMutation(() => ({ mutationFn }))

packages/svelte-query/tests/createMutation/OnSuccessExample.svelte

@@ -1,18 +1,18 @@
 <script lang="ts">
-  import { QueryClient } from '@tanstack/query-core'
+  import type { QueryClient } from '@tanstack/query-core'
   import { createMutation, setQueryClientContext } from '../../src/index.js'
   import { sleep } from '@tanstack/query-test-utils'
 
   type Props = {
-    onSuccessMock: any
-    onSettledMock: any
+    queryClient: QueryClient
+    onSuccessMock: (data: number) => void
+    onSettledMock: (data: number | undefined) => void
   }
 
-  const { onSettledMock, onSuccessMock }: Props = $props()
+  const { queryClient, onSettledMock, onSuccessMock }: Props = $props()
 
   let count = $state(0)
 
-  const queryClient = new QueryClient()
   setQueryClientContext(queryClient)
 
   const mutation = createMutation(() => ({

packages/svelte-query/tests/createMutation/ResetExample.svelte

@@ -1,9 +1,14 @@
 <script lang="ts">
-  import { QueryClient } from '@tanstack/query-core'
+  import type { QueryClient } from '@tanstack/query-core'
   import { createMutation, setQueryClientContext } from '../../src/index.js'
   import { sleep } from '@tanstack/query-test-utils'
 
-  const queryClient = new QueryClient()
+  type Props = {
+    queryClient: QueryClient
+  }
+
+  let { queryClient }: Props = $props()
+
   setQueryClientContext(queryClient)
 
   const mutation = createMutation(() => ({

packages/svelte-query/tests/createMutation/createMutation.svelte.test.ts

@@ -10,16 +10,22 @@ import OnSuccessExample from './OnSuccessExample.svelte'
 import FailureExample from './FailureExample.svelte'
 
 describe('createMutation', () => {
+  let queryClient: QueryClient
+
   beforeEach(() => {
     vi.useFakeTimers()
+    queryClient = new QueryClient()
   })
 
   afterEach(() => {
+    queryClient.clear()
     vi.useRealTimers()
   })
 
   test('Able to reset `error`', async () => {
-    const rendered = render(ResetExample)
+    const rendered = render(ResetExample, {
+      props: { queryClient },
+    })
 
     expect(rendered.queryByText('Error: undefined')).toBeInTheDocument()
 
@@ -38,6 +44,7 @@ describe('createMutation', () => {
 
     const rendered = render(OnSuccessExample, {
       props: {
+        queryClient,
         onSuccessMock,
         onSettledMock,
       },
@@ -75,6 +82,7 @@ describe('createMutation', () => {
 
     const rendered = render(FailureExample, {
       props: {
+        queryClient,
         mutationFn,
       },
     })
@@ -106,13 +114,13 @@ describe('createMutation', () => {
       const queryClient1 = new QueryClient()
       const queryClient2 = new QueryClient()
 
-      let queryClient = $state(queryClient1)
+      let activeClient = $state(queryClient1)
 
       const mutation = createMutation(
         () => ({
           mutationFn: (params: string) => sleep(10).then(() => params),
         }),
-        () => queryClient,
+        () => activeClient,
       )
 
       mutation.mutate('first')
@@ -121,7 +129,7 @@ describe('createMutation', () => {
       expect(mutation.status).toBe('success')
       expect(mutation.data).toBe('first')
 
-      queryClient = queryClient2
+      activeClient = queryClient2
       flushSync()
 
       expect(mutation.status).toBe('idle')

packages/svelte-query/tests/createQueries/IsRestoringExample.svelte

@@ -1,21 +1,20 @@
 <script lang="ts">
-  import { QueryClient } from '@tanstack/query-core'
+  import type { QueryClient } from '@tanstack/query-core'
   import { queryKey } from '@tanstack/query-test-utils'
   import {
     setIsRestoringContext,
     setQueryClientContext,
   } from '../../src/context.js'
   import { createQueries } from '../../src/index.js'
 
-  let {
-    queryFn1,
-    queryFn2,
-  }: {
+  type Props = {
+    queryClient: QueryClient
     queryFn1: () => Promise<string>
     queryFn2: () => Promise<string>
-  } = $props()
+  }
+
+  let { queryClient, queryFn1, queryFn2 }: Props = $props()
 
-  const queryClient = new QueryClient()
   setQueryClientContext(queryClient)
   setIsRestoringContext({ current: true })
 

packages/svelte-query/tests/createQueries/createQueries.svelte.test.ts

@@ -274,7 +274,7 @@ describe('createQueries', () => {
     const queryFn2 = vi.fn(() => sleep(10).then(() => 'data2'))
 
     const rendered = render(IsRestoringExample, {
-      props: { queryFn1, queryFn2 },
+      props: { queryClient, queryFn1, queryFn2 },
     })
 
     await vi.advanceTimersByTimeAsync(0)
@@ -305,7 +305,7 @@ describe('createQueries', () => {
     const queryFn2 = vi.fn(() => sleep(20).then(() => 'data2'))
 
     const rendered = render(IsRestoringExample, {
-      props: { queryFn1, queryFn2 },
+      props: { queryClient, queryFn1, queryFn2 },
     })
 
     await vi.advanceTimersByTimeAsync(0)