@tanstack/solid-query 4.24.9 → 5.0.0-alpha.0

package/src/__tests__/useIsFetching.test.tsx

@@ -1,14 +1,6 @@
 import { fireEvent, render, screen, waitFor } from 'solid-testing-library'
 
-import {
-  createContext,
-  createEffect,
-  createRenderEffect,
-  createSignal,
-  ErrorBoundary,
-  Show,
-} from 'solid-js'
-import type { QueryClient } from '..'
+import { createEffect, createRenderEffect, createSignal, Show } from 'solid-js'
 import { createQuery, QueryCache, QueryClientProvider, useIsFetching } from '..'
 import { createQueryClient, queryKey, setActTimeout, sleep } from './utils'
 
@@ -27,18 +19,14 @@ describe('useIsFetching', () => {
     function Query() {
       const [ready, setReady] = createSignal(false)
 
-      createQuery(
-        key,
-        async () => {
+      createQuery(() => ({
+        queryKey: key,
+        queryFn: async () => {
           await sleep(50)
           return 'test'
         },
-        {
-          get enabled() {
-            return ready()
-          },
-        },
-      )
+        enabled: ready(),
+      }))
 
       return <button onClick={() => setReady(true)}>setReady</button>
     }
@@ -82,18 +70,24 @@ describe('useIsFetching', () => {
     }
 
     function FirstQuery() {
-      createQuery(key1, async () => {
-        await sleep(100)
-        return 'data'
-      })
+      createQuery(() => ({
+        queryKey: key1,
+        queryFn: async () => {
+          await sleep(150)
+          return 'data'
+        },
+      }))
       return null
     }
 
     function SecondQuery() {
-      createQuery(key2, async () => {
-        await sleep(100)
-        return 'data'
-      })
+      createQuery(() => ({
+        queryKey: key2,
+        queryFn: async () => {
+          await sleep(200)
+          return 'data'
+        },
+      }))
       return null
     }
 
@@ -103,7 +97,7 @@ describe('useIsFetching', () => {
       createEffect(() => {
         setActTimeout(() => {
           setRenderSecond(true)
-        }, 50)
+        }, 100)
       })
 
       return (
@@ -134,24 +128,34 @@ describe('useIsFetching', () => {
     const isFetchings: number[] = []
 
     function One() {
-      createQuery(key1, async () => {
-        await sleep(10)
-        return 'test'
-      })
+      createQuery(() => ({
+        queryKey: key1,
+        queryFn: async () => {
+          await sleep(10)
+          return 'test'
+        },
+      }))
       return null
     }
 
     function Two() {
-      createQuery(key2, async () => {
-        await sleep(20)
-        return 'test'
-      })
+      createQuery(() => ({
+        queryKey: key2,
+        queryFn: async () => {
+          await sleep(20)
+          return 'test'
+        },
+      }))
       return null
     }
 
     function Page() {
       const [started, setStarted] = createSignal(false)
-      const isFetching = useIsFetching(key1)
+      const isFetching = useIsFetching(() => ({
+        filters: {
+          queryKey: key1,
+        },
+      }))
 
       createRenderEffect(() => {
         isFetchings.push(isFetching())
@@ -185,97 +189,18 @@ describe('useIsFetching', () => {
     expect(isFetchings).toEqual(expect.not.arrayContaining([2]))
   })
 
-  describe('with custom context', () => {
-    it('should update as queries start and stop fetching', async () => {
-      const context = createContext<QueryClient | undefined>(undefined)
-
-      const queryCache = new QueryCache()
-      const queryClient = createQueryClient({ queryCache })
-      const key = queryKey()
-
-      function Page() {
-        const [ready, setReady] = createSignal(false)
-
-        const isFetching = useIsFetching(undefined, { context: context })
-
-        createQuery(
-          key,
-          async () => {
-            await sleep(50)
-            return 'test'
-          },
-          {
-            get enabled() {
-              return ready()
-            },
-            context,
-          },
-        )
-
-        return (
-          <div>
-            <div>isFetching: {isFetching}</div>
-            <button onClick={() => setReady(true)}>setReady</button>
-          </div>
-        )
-      }
-
-      render(() => (
-        <QueryClientProvider client={queryClient} context={context}>
-          <Page />
-        </QueryClientProvider>
-      ))
-
-      await screen.findByText('isFetching: 0')
-      fireEvent.click(screen.getByRole('button', { name: /setReady/i }))
-      await screen.findByText('isFetching: 1')
-      await screen.findByText('isFetching: 0')
-    })
-
-    it('should throw if the context is not passed to useIsFetching', async () => {
-      const context = createContext<QueryClient | undefined>(undefined)
-
-      const queryCache = new QueryCache()
-      const queryClient = createQueryClient({ queryCache })
-      const key = queryKey()
-
-      function Page() {
-        const isFetching = useIsFetching()
-
-        createQuery(key, async () => 'test', {
-          enabled: true,
-          context,
-          useErrorBoundary: true,
-        })
-
-        return (
-          <div>
-            <div>isFetching: {isFetching}</div>
-          </div>
-        )
-      }
-
-      render(() => (
-        <QueryClientProvider client={queryClient} context={context}>
-          <ErrorBoundary fallback={() => <div>error boundary</div>}>
-            <Page />
-          </ErrorBoundary>
-        </QueryClientProvider>
-      ))
-
-      await waitFor(() => screen.getByText('error boundary'))
-    })
-  })
-
   it('should show the correct fetching state when mounted after a query', async () => {
     const queryClient = createQueryClient()
     const key = queryKey()
 
     function Page() {
-      createQuery(key, async () => {
-        await sleep(10)
-        return 'test'
-      })
+      createQuery(() => ({
+        queryKey: key,
+        queryFn: async () => {
+          await sleep(10)
+          return 'test'
+        },
+      }))
 
       const isFetching = useIsFetching()
 
@@ -295,4 +220,34 @@ describe('useIsFetching', () => {
     await screen.findByText('isFetching: 1')
     await screen.findByText('isFetching: 0')
   })
+
+  it('should use provided custom queryClient', async () => {
+    const queryClient = createQueryClient()
+    const key = queryKey()
+
+    function Page() {
+      createQuery(
+        () => ({
+          queryKey: key,
+          queryFn: async () => {
+            await sleep(10)
+            return 'test'
+          },
+        }),
+        () => queryClient,
+      )
+
+      const isFetching = useIsFetching(() => ({ queryClient }))
+
+      return (
+        <div>
+          <div>isFetching: {isFetching}</div>
+        </div>
+      )
+    }
+
+    render(() => <Page></Page>)
+
+    await screen.findByText('isFetching: 1')
+  })
 })

package/src/__tests__/useIsMutating.test.tsx

@@ -1,20 +1,8 @@
 import { fireEvent, screen, waitFor } from 'solid-testing-library'
-import {
-  createMutation,
-  QueryClient,
-  QueryClientProvider,
-  useIsMutating,
-} from '..'
+import { createMutation, QueryClientProvider, useIsMutating } from '..'
 import { createQueryClient, sleep } from './utils'
 
-import {
-  createContext,
-  createEffect,
-  createRenderEffect,
-  createSignal,
-  ErrorBoundary,
-  Show,
-} from 'solid-js'
+import { createEffect, createRenderEffect, createSignal, Show } from 'solid-js'
 import { render } from 'solid-testing-library'
 import * as MutationCacheModule from '../../../query-core/src/mutationCache'
 import { setActTimeout } from './utils'
@@ -33,14 +21,20 @@ describe('useIsMutating', () => {
     }
 
     function Mutations() {
-      const { mutate: mutate1 } = createMutation(['mutation1'], async () => {
-        await sleep(150)
-        return 'data'
-      })
-      const { mutate: mutate2 } = createMutation(['mutation2'], async () => {
-        await sleep(50)
-        return 'data'
-      })
+      const { mutate: mutate1 } = createMutation(() => ({
+        mutationKey: ['mutation1'],
+        mutationFn: async () => {
+          await sleep(150)
+          return 'data'
+        },
+      }))
+      const { mutate: mutate2 } = createMutation(() => ({
+        mutationKey: ['mutation2'],
+        mutationFn: async () => {
+          await sleep(50)
+          return 'data'
+        },
+      }))
 
       createEffect(() => {
         mutate1()
@@ -74,7 +68,9 @@ describe('useIsMutating', () => {
     const queryClient = createQueryClient()
 
     function IsMutating() {
-      const isMutating = useIsMutating(['mutation1'])
+      const isMutating = useIsMutating(() => ({
+        filters: { mutationKey: ['mutation1'] },
+      }))
       createRenderEffect(() => {
         isMutatings.push(isMutating())
       })
@@ -82,14 +78,20 @@ describe('useIsMutating', () => {
     }
 
     function Page() {
-      const { mutate: mutate1 } = createMutation(['mutation1'], async () => {
-        await sleep(100)
-        return 'data'
-      })
-      const { mutate: mutate2 } = createMutation(['mutation2'], async () => {
-        await sleep(100)
-        return 'data'
-      })
+      const { mutate: mutate1 } = createMutation(() => ({
+        mutationKey: ['mutation1'],
+        mutationFn: async () => {
+          await sleep(100)
+          return 'data'
+        },
+      }))
+      const { mutate: mutate2 } = createMutation(() => ({
+        mutationKey: ['mutation2'],
+        mutationFn: async () => {
+          await sleep(100)
+          return 'data'
+        },
+      }))
 
       createEffect(() => {
         mutate1()
@@ -113,10 +115,12 @@ describe('useIsMutating', () => {
     const queryClient = createQueryClient()
 
     function IsMutating() {
-      const isMutating = useIsMutating({
-        predicate: (mutation) =>
-          mutation.options.mutationKey?.[0] === 'mutation1',
-      })
+      const isMutating = useIsMutating(() => ({
+        filters: {
+          predicate: (mutation) =>
+            mutation.options.mutationKey?.[0] === 'mutation1',
+        },
+      }))
       createRenderEffect(() => {
         isMutatings.push(isMutating())
       })
@@ -124,14 +128,20 @@ describe('useIsMutating', () => {
     }
 
     function Page() {
-      const { mutate: mutate1 } = createMutation(['mutation1'], async () => {
-        await sleep(100)
-        return 'data'
-      })
-      const { mutate: mutate2 } = createMutation(['mutation2'], async () => {
-        await sleep(100)
-        return 'data'
-      })
+      const { mutate: mutate1 } = createMutation(() => ({
+        mutationKey: ['mutation1'],
+        mutationFn: async () => {
+          await sleep(100)
+          return 'data'
+        },
+      }))
+      const { mutate: mutate2 } = createMutation(() => ({
+        mutationKey: ['mutation2'],
+        mutationFn: async () => {
+          await sleep(100)
+          return 'data'
+        },
+      }))
 
       createEffect(() => {
         mutate1()
@@ -176,10 +186,13 @@ describe('useIsMutating', () => {
 
     function Page() {
       const [mounted, setMounted] = createSignal(true)
-      const { mutate: mutate1 } = createMutation(['mutation1'], async () => {
-        await sleep(10)
-        return 'data'
-      })
+      const { mutate: mutate1 } = createMutation(() => ({
+        mutationKey: ['mutation1'],
+        mutationFn: async () => {
+          await sleep(10)
+          return 'data'
+        },
+      }))
 
       createEffect(() => {
         mutate1()
@@ -209,93 +222,35 @@ describe('useIsMutating', () => {
     MutationCacheSpy.mockRestore()
   })
 
-  describe('with custom context', () => {
-    it('should return the number of fetching mutations', async () => {
-      const context = createContext<QueryClient | undefined>(undefined)
-
-      const isMutatings: number[] = []
-      const queryClient = new QueryClient()
-
-      function IsMutating() {
-        const isMutating = useIsMutating(undefined, { context })
-
-        createRenderEffect(() => {
-          isMutatings.push(isMutating())
-        })
-
-        return null
-      }
+  it('should use provided custom queryClient', async () => {
+    const queryClient = createQueryClient()
 
-      function Page() {
-        const { mutate: mutate1 } = createMutation(
-          ['mutation1'],
-          async () => {
-            await sleep(150)
-            return 'data'
-          },
-          { context },
-        )
-        const { mutate: mutate2 } = createMutation(
-          ['mutation2'],
-          async () => {
-            await sleep(50)
+    function Page() {
+      const isMutating = useIsMutating(() => ({ queryClient }))
+      const { mutate } = createMutation(
+        () => ({
+          mutationKey: ['mutation1'],
+          mutationFn: async () => {
+            await sleep(10)
             return 'data'
           },
-          { context },
-        )
-
-        createEffect(() => {
-          mutate1()
-          setActTimeout(() => {
-            mutate2()
-          }, 50)
-        })
-
-        return <IsMutating />
-      }
-
-      render(() => (
-        <QueryClientProvider client={queryClient} context={context}>
-          <Page />
-        </QueryClientProvider>
-      ))
-      await waitFor(() => expect(isMutatings).toEqual([0, 1, 2, 1, 0]))
-    })
-
-    it('should throw if the context is not passed to useIsMutating', async () => {
-      const context = createContext<QueryClient | undefined>(undefined)
-
-      const isMutatings: number[] = []
-      const queryClient = new QueryClient()
-
-      function IsMutating() {
-        const isMutating = useIsMutating(undefined)
-        isMutatings.push(isMutating())
-        return null
-      }
-
-      function Page() {
-        const { mutate } = createMutation(['mutation'], async () => 'data', {
-          useErrorBoundary: true,
-          context,
-        })
+        }),
+        () => queryClient,
+      )
 
-        createEffect(() => {
-          mutate()
-        })
+      createEffect(() => {
+        mutate()
+      })
 
-        return <IsMutating />
-      }
+      return (
+        <div>
+          <div>mutating: {isMutating}</div>
+        </div>
+      )
+    }
 
-      render(() => (
-        <QueryClientProvider client={queryClient} context={context}>
-          <ErrorBoundary fallback={() => <div>error boundary</div>}>
-            <Page />
-          </ErrorBoundary>
-        </QueryClientProvider>
-      ))
+    render(() => <Page></Page>)
 
-      await waitFor(() => screen.getByText('error boundary'))
-    })
+    await waitFor(() => screen.findByText('mutating: 1'))
   })
 })

package/src/__tests__/utils.tsx

@@ -4,9 +4,9 @@ import type { ParentProps } from 'solid-js'
 import { createEffect, createSignal, onCleanup, Show } from 'solid-js'
 
 let queryKeyCount = 0
-export function queryKey(): () => Array<string> {
-  const localQueryKeyCount = queryKeyCount++
-  return () => [`query_${localQueryKeyCount}`]
+export function queryKey(): Array<string> {
+  queryKeyCount++
+  return [`query_${queryKeyCount}`]
 }
 
 export const Blink = (
@@ -30,8 +30,7 @@ export const Blink = (
 }
 
 export function createQueryClient(config?: QueryClientConfig): QueryClient {
-  jest.spyOn(console, 'error').mockImplementation(() => undefined)
-  return new QueryClient({ logger: mockLogger, ...config })
+  return new QueryClient(config)
 }
 
 export function mockVisibilityState(value: DocumentVisibilityState) {
@@ -42,12 +41,6 @@ export function mockNavigatorOnLine(value: boolean) {
   return jest.spyOn(navigator, 'onLine', 'get').mockReturnValue(value)
 }
 
-export const mockLogger = {
-  log: jest.fn(),
-  warn: jest.fn(),
-  error: jest.fn(),
-}
-
 export function sleep(timeout: number): Promise<void> {
   return new Promise((resolve, _reject) => {
     setTimeout(resolve, timeout)