@tanstack/solid-query 4.24.10 → 5.0.0-alpha.1

package/src/__tests__/createMutation.test.tsx

@@ -1,13 +1,11 @@
 import '@testing-library/jest-dom'
 import {
-  createContext,
   createEffect,
   createRenderEffect,
   createSignal,
   ErrorBoundary,
 } from 'solid-js'
 import { fireEvent, render, screen, waitFor } from 'solid-testing-library'
-import type { QueryClient } from '..'
 import {
   createMutation,
   MutationCache,
@@ -23,14 +21,16 @@ import {
   sleep,
 } from './utils'
 
-describe('useMutation', () => {
+describe('createMutation', () => {
   const queryCache = new QueryCache()
   const mutationCache = new MutationCache()
   const queryClient = createQueryClient({ queryCache, mutationCache })
 
   it('should be able to reset `data`', async () => {
     function Page() {
-      const mutation = createMutation(() => Promise.resolve('mutation'))
+      const mutation = createMutation(() => ({
+        mutationFn: () => Promise.resolve('mutation'),
+      }))
 
       return (
         <div>
@@ -64,11 +64,13 @@ describe('useMutation', () => {
 
   it('should be able to reset `error`', async () => {
     function Page() {
-      const mutation = createMutation<string, Error>(() => {
-        const err = new Error('Expected mock error. All is well!')
-        err.stack = ''
-        return Promise.reject(err)
-      })
+      const mutation = createMutation<string, Error>(() => ({
+        mutationFn: () => {
+          const err = new Error('Expected mock error. All is well!')
+          err.stack = ''
+          return Promise.reject(err)
+        },
+      }))
 
       return (
         <div>
@@ -110,17 +112,15 @@ describe('useMutation', () => {
     const onSettledMock = jest.fn()
 
     function Page() {
-      const mutation = createMutation(
-        (vars: { count: number }) => Promise.resolve(vars.count),
-        {
-          onSuccess: (data) => {
-            onSuccessMock(data)
-          },
-          onSettled: (data) => {
-            onSettledMock(data)
-          },
+      const mutation = createMutation(() => ({
+        mutationFn: (vars: { count: number }) => Promise.resolve(vars.count),
+        onSuccess: (data) => {
+          onSuccessMock(data)
         },
-      )
+        onSettled: (data) => {
+          onSettledMock(data)
+        },
+      }))
 
       return (
         <div>
@@ -177,7 +177,7 @@ describe('useMutation', () => {
     const mutateFn = jest.fn<Promise<Value>, [value: Value]>()
 
     mutateFn.mockImplementationOnce(() => {
-      return Promise.reject('Error test Jonas')
+      return Promise.reject(new Error('Error test Jonas'))
     })
 
     mutateFn.mockImplementation(async (value) => {
@@ -186,14 +186,16 @@ describe('useMutation', () => {
     })
 
     function Page() {
-      const mutation = createMutation<Value, string, Value>(mutateFn)
+      const mutation = createMutation(() => ({
+        mutationFn: mutateFn,
+      }))
 
       return (
         <div>
           <h1>Data {mutation.data?.count}</h1>
           <h2>Status {mutation.status}</h2>
           <h2>Failed {mutation.failureCount} times</h2>
-          <h2>Failed because {mutation.failureReason ?? 'null'}</h2>
+          <h2>Failed because {mutation.failureReason?.message ?? 'null'}</h2>
           <button
             onClick={() => {
               setCount((c) => c + 1)
@@ -221,7 +223,7 @@ describe('useMutation', () => {
     await waitFor(() => screen.getByText('Failed because Error test Jonas'))
 
     fireEvent.click(screen.getByRole('button', { name: /mutate/i }))
-    await waitFor(() => screen.getByText('Status loading'))
+    await waitFor(() => screen.getByText('Status pending'))
     await waitFor(() => screen.getByText('Status success'))
     await waitFor(() => screen.getByText('Data 2'))
     await waitFor(() => screen.getByText('Failed 0 times'))
@@ -234,23 +236,21 @@ describe('useMutation', () => {
     const [count, setCount] = createSignal(0)
 
     function Page() {
-      const mutation = createMutation(
-        (vars: { count: number }) => {
+      const mutation = createMutation(() => ({
+        mutationFn: (vars: { count: number }) => {
           const error = new Error(
             `Expected mock error. All is well! ${vars.count}`,
           )
           error.stack = ''
           return Promise.reject(error)
         },
-        {
-          onError: (error: Error) => {
-            onErrorMock(error.message)
-          },
-          onSettled: (_data, error) => {
-            onSettledMock(error?.message)
-          },
+        onError: (error: Error) => {
+          onErrorMock(error.message)
         },
-      )
+        onSettled: (_data, error) => {
+          onSettledMock(error?.message)
+        },
+      }))
 
       return (
         <div>
@@ -314,14 +314,15 @@ describe('useMutation', () => {
     const callbacks: string[] = []
 
     function Page() {
-      const mutation = createMutation(async (text: string) => text, {
+      const mutation = createMutation(() => ({
+        mutationFn: async (text: string) => text,
         onSuccess: async () => {
           callbacks.push('useMutation.onSuccess')
         },
         onSettled: async () => {
           callbacks.push('useMutation.onSettled')
         },
-      })
+      }))
 
       createEffect(() => {
         const { mutateAsync } = mutation
@@ -364,17 +365,16 @@ describe('useMutation', () => {
     const callbacks: string[] = []
 
     function Page() {
-      const mutation = createMutation(
-        async (_text: string) => Promise.reject('oops'),
-        {
-          onError: async () => {
-            callbacks.push('useMutation.onError')
-          },
-          onSettled: async () => {
-            callbacks.push('useMutation.onSettled')
-          },
+      const mutation = createMutation(() => ({
+        mutationFn: async (_text: string) => Promise.reject(new Error('oops')),
+
+        onError: async () => {
+          callbacks.push('useMutation.onError')
         },
-      )
+        onSettled: async () => {
+          callbacks.push('useMutation.onSettled')
+        },
+      }))
 
       createEffect(() => {
         const { mutateAsync } = mutation
@@ -389,7 +389,7 @@ describe('useMutation', () => {
               },
             })
           } catch (error) {
-            callbacks.push(`mutateAsync.error:${error}`)
+            callbacks.push(`mutateAsync.error:${(error as Error).message}`)
           }
         }, 10)
       })
@@ -417,7 +417,7 @@ describe('useMutation', () => {
   it('should be able to use mutation defaults', async () => {
     const key = queryKey()
 
-    queryClient.setMutationDefaults(key(), {
+    queryClient.setMutationDefaults(key, {
       mutationFn: async (text: string) => {
         await sleep(10)
         return text
@@ -427,7 +427,9 @@ describe('useMutation', () => {
     const states: CreateMutationResult<any, any, any, any>[] = []
 
     function Page() {
-      const mutation = createMutation<string, unknown, string>(key())
+      const mutation = createMutation<string, unknown, string>(() => ({
+        mutationKey: key,
+      }))
 
       createRenderEffect(() => {
         states.push({ ...mutation })
@@ -452,25 +454,23 @@ describe('useMutation', () => {
     await sleep(100)
 
     expect(states.length).toBe(3)
-    expect(states[0]).toMatchObject({ data: undefined, isLoading: false })
-    expect(states[1]).toMatchObject({ data: undefined, isLoading: true })
-    expect(states[2]).toMatchObject({ data: 'todo', isLoading: false })
+    expect(states[0]).toMatchObject({ data: undefined, isPending: false })
+    expect(states[1]).toMatchObject({ data: undefined, isPending: true })
+    expect(states[2]).toMatchObject({ data: 'todo', isPending: false })
   })
 
   it('should be able to retry a failed mutation', async () => {
     let count = 0
 
     function Page() {
-      const mutation = createMutation(
-        (_text: string) => {
+      const mutation = createMutation(() => ({
+        mutationFn: (_text: string) => {
           count++
-          return Promise.reject('oops')
-        },
-        {
-          retry: 1,
-          retryDelay: 5,
+          return Promise.reject(new Error('oops'))
         },
-      )
+        retry: 1,
+        retryDelay: 5,
+      }))
 
       createEffect(() => {
         const { mutate } = mutation
@@ -499,16 +499,14 @@ describe('useMutation', () => {
     let count = 0
 
     function Page() {
-      const mutation = createMutation(
-        (_text: string) => {
+      const mutation = createMutation(() => ({
+        mutationFn: (_text: string) => {
           count++
           return Promise.reject(new Error('oops'))
         },
-        {
-          retry: 1,
-          retryDelay: 5,
-        },
-      )
+        retry: 1,
+        retryDelay: 5,
+      }))
 
       return (
         <div>
@@ -540,7 +538,7 @@ describe('useMutation', () => {
 
     await waitFor(() => {
       expect(
-        screen.getByText('error: null, status: loading, isPaused: true'),
+        screen.getByText('error: null, status: pending, isPaused: true'),
       ).toBeInTheDocument()
     })
 
@@ -568,16 +566,14 @@ describe('useMutation', () => {
     let count = 0
 
     function Page() {
-      const mutation = createMutation(
-        async (_text: string) => {
+      const mutation = createMutation(() => ({
+        mutationFn: async (_text: string) => {
           count++
           await sleep(10)
           return count
         },
-        {
-          onMutate,
-        },
-      )
+        onMutate,
+      }))
 
       return (
         <div>
@@ -600,7 +596,7 @@ describe('useMutation', () => {
 
     fireEvent.click(screen.getByRole('button', { name: /mutate/i }))
 
-    await screen.findByText('data: null, status: loading, isPaused: true')
+    await screen.findByText('data: null, status: pending, isPaused: true')
 
     expect(onMutate).toHaveBeenCalledTimes(1)
     expect(onMutate).toHaveBeenCalledWith('todo')
@@ -622,11 +618,13 @@ describe('useMutation', () => {
     const states: Array<string> = []
 
     function Page() {
-      const mutation = createMutation(async (_text: string) => {
-        count++
-        await sleep(10)
-        return count
-      })
+      const mutation = createMutation(() => ({
+        mutationFn: async (_text: string) => {
+          count++
+          await sleep(10)
+          return count
+        },
+      }))
 
       createRenderEffect(() => {
         states.push(`${mutation.status}, ${mutation.isPaused}`)
@@ -653,11 +651,11 @@ describe('useMutation', () => {
 
     fireEvent.click(screen.getByRole('button', { name: /mutate/i }))
 
-    await screen.findByText('data: null, status: loading, isPaused: true')
+    await screen.findByText('data: null, status: pending, isPaused: true')
 
-    // no intermediate 'loading, false' state is expected because we don't start mutating!
+    // no intermediate 'pending, false' state is expected because we don't start mutating!
     expect(states[0]).toBe('idle, false')
-    expect(states[1]).toBe('loading, true')
+    expect(states[1]).toBe('pending, true')
 
     onlineMock.mockReturnValue(true)
     window.dispatchEvent(new Event('online'))
@@ -674,18 +672,18 @@ describe('useMutation', () => {
     const states: CreateMutationResult<any, any, any, any>[] = []
 
     function Page() {
-      const mutation = createMutation(
-        async (_text: string) => {
+      const mutation = createMutation(() => ({
+        mutationFn: async (_text: string) => {
           await sleep(1)
           count++
-          return count > 1 ? Promise.resolve('data') : Promise.reject('oops')
-        },
-        {
-          retry: 1,
-          retryDelay: 5,
-          networkMode: 'offlineFirst',
+          return count > 1
+            ? Promise.resolve('data')
+            : Promise.reject(new Error('oops'))
         },
-      )
+        retry: 1,
+        retryDelay: 5,
+        networkMode: 'offlineFirst',
+      }))
 
       createRenderEffect(() => {
         states.push({ ...mutation })
@@ -711,28 +709,28 @@ describe('useMutation', () => {
 
     expect(states.length).toBe(4)
     expect(states[0]).toMatchObject({
-      isLoading: false,
+      isPending: false,
       isPaused: false,
       failureCount: 0,
       failureReason: null,
     })
     expect(states[1]).toMatchObject({
-      isLoading: true,
+      isPending: true,
       isPaused: false,
       failureCount: 0,
       failureReason: null,
     })
     expect(states[2]).toMatchObject({
-      isLoading: true,
+      isPending: true,
       isPaused: false,
       failureCount: 1,
-      failureReason: 'oops',
+      failureReason: new Error('oops'),
     })
     expect(states[3]).toMatchObject({
-      isLoading: true,
+      isPending: true,
       isPaused: true,
       failureCount: 1,
-      failureReason: 'oops',
+      failureReason: new Error('oops'),
     })
 
     onlineMock.mockReturnValue(true)
@@ -742,13 +740,13 @@ describe('useMutation', () => {
 
     expect(states.length).toBe(6)
     expect(states[4]).toMatchObject({
-      isLoading: true,
+      isPending: true,
       isPaused: false,
       failureCount: 1,
-      failureReason: 'oops',
+      failureReason: new Error('oops'),
     })
     expect(states[5]).toMatchObject({
-      isLoading: false,
+      isPending: false,
       isPaused: false,
       failureCount: 0,
       failureReason: null,
@@ -760,7 +758,7 @@ describe('useMutation', () => {
 
   it('should not change state if unmounted', async () => {
     function Mutates() {
-      const mutation = createMutation(() => sleep(10))
+      const mutation = createMutation(() => ({ mutationFn: () => sleep(10) }))
       return <button onClick={() => mutation.mutate()}>mutate</button>
     }
     function Page() {
@@ -782,16 +780,16 @@ describe('useMutation', () => {
     fireEvent.click(screen.getByText('unmount'))
   })
 
-  it('should be able to throw an error when useErrorBoundary is set to true', async () => {
+  it('should be able to throw an error when throwErrors is set to true', async () => {
     function Page() {
-      const mutation = createMutation<string, Error>(
-        () => {
+      const mutation = createMutation<string, Error>(() => ({
+        mutationFn: () => {
           const err = new Error('Expected mock error. All is well!')
           err.stack = ''
           return Promise.reject(err)
         },
-        { useErrorBoundary: true },
-      )
+        throwErrors: true,
+      }))
 
       return (
         <div>
@@ -821,22 +819,20 @@ describe('useMutation', () => {
     })
   })
 
-  it('should be able to throw an error when useErrorBoundary is a function that returns true', async () => {
+  it('should be able to throw an error when throwErrors is a function that returns true', async () => {
     let boundary = false
     function Page() {
-      const mutation = createMutation<string, Error>(
-        () => {
+      const mutation = createMutation<string, Error>(() => ({
+        mutationFn: () => {
           const err = new Error('mock error')
           err.stack = ''
           return Promise.reject(err)
         },
-        {
-          useErrorBoundary: () => {
-            boundary = !boundary
-            return !boundary
-          },
+        throwErrors: () => {
+          boundary = !boundary
+          return !boundary
         },
-      )
+      }))
 
       return (
         <div>
@@ -892,17 +888,16 @@ describe('useMutation', () => {
     const metaErrorMessage = 'mutation failed'
 
     function Page() {
-      const mutationSucceed = createMutation(async () => '', {
+      const mutationSucceed = createMutation(() => ({
+        mutationFn: async () => '',
         meta: { metaSuccessMessage },
-      })
-      const mutationError = createMutation(
-        async () => {
+      }))
+      const mutationError = createMutation(() => ({
+        mutationFn: async () => {
           throw new Error('')
         },
-        {
-          meta: { metaErrorMessage },
-        },
-      )
+        meta: { metaErrorMessage },
+      }))
 
       return (
         <div>
@@ -953,19 +948,17 @@ describe('useMutation', () => {
     }
 
     function Component() {
-      const mutation = createMutation(
-        async (_text: string) => {
+      const mutation = createMutation(() => ({
+        mutationFn: async (_text: string) => {
           count++
           await sleep(10)
           return count
         },
-        {
-          mutationKey: mutationKey(),
-          cacheTime: 0,
-          onSuccess,
-          onSettled,
-        },
-      )
+        mutationKey: mutationKey,
+        gcTime: 0,
+        onSuccess,
+        onSettled,
+      }))
 
       return (
         <div>
@@ -1000,7 +993,7 @@ describe('useMutation', () => {
 
     await waitFor(() => {
       expect(
-        queryClient.getMutationCache().findAll({ mutationKey: mutationKey() }),
+        queryClient.getMutationCache().findAll({ mutationKey: mutationKey }),
       ).toHaveLength(0)
     })
 
@@ -1012,71 +1005,6 @@ describe('useMutation', () => {
     expect(onSettledMutate).toHaveBeenCalledTimes(0)
   })
 
-  describe('with custom context', () => {
-    it('should be able to reset `data`', async () => {
-      const context = createContext<QueryClient | undefined>(undefined)
-
-      function Page() {
-        const mutation = createMutation(() => Promise.resolve('mutation'), {
-          context,
-        })
-
-        return (
-          <div>
-            <h1>{mutation.data ?? 'empty'}</h1>
-            <button onClick={() => mutation.reset()}>reset</button>
-            <button onClick={() => mutation.mutate()}>mutate</button>
-          </div>
-        )
-      }
-
-      render(() => (
-        <QueryClientProvider client={queryClient} context={context}>
-          <Page />
-        </QueryClientProvider>
-      ))
-
-      expect(screen.getByRole('heading').textContent).toBe('empty')
-
-      fireEvent.click(screen.getByRole('button', { name: /mutate/i }))
-
-      await waitFor(() => {
-        expect(screen.getByRole('heading').textContent).toBe('mutation')
-      })
-
-      fireEvent.click(screen.getByRole('button', { name: /reset/i }))
-
-      await waitFor(() => {
-        expect(screen.getByRole('heading').textContent).toBe('empty')
-      })
-    })
-
-    it('should throw if the context is not passed to useMutation', async () => {
-      const context = createContext<QueryClient | undefined>(undefined)
-
-      function Page() {
-        const { data = '' } = createMutation(() => Promise.resolve('mutation'))
-
-        return (
-          <div>
-            <h1 data-testid="title">{data}</h1>
-          </div>
-        )
-      }
-
-      render(() => (
-        <QueryClientProvider client={queryClient} context={context}>
-          <ErrorBoundary fallback={() => <div>error boundary</div>}>
-            <Page />
-          </ErrorBoundary>
-          ,
-        </QueryClientProvider>
-      ))
-
-      await waitFor(() => screen.getByText('error boundary'))
-    })
-  })
-
   it('should call mutate callbacks only for the last observer', async () => {
     const onSuccess = jest.fn()
     const onSuccessMutate = jest.fn()
@@ -1085,17 +1013,15 @@ describe('useMutation', () => {
     let count = 0
 
     function Page() {
-      const mutation = createMutation(
-        async (_text: string) => {
+      const mutation = createMutation(() => ({
+        mutationFn: async (_text: string) => {
           count++
           await sleep(10)
           return `result${count}`
         },
-        {
-          onSuccess,
-          onSettled,
-        },
-      )
+        onSuccess,
+        onSettled,
+      }))
 
       return (
         <div>
@@ -1149,16 +1075,14 @@ describe('useMutation', () => {
     const onError = jest.fn()
 
     function Page() {
-      const mutation = createMutation(
-        async (_text: string) => {
+      const mutation = createMutation(() => ({
+        mutationFn: async (_text: string) => {
           await sleep(10)
           return 'result'
         },
-        {
-          onSuccess: () => Promise.reject(error),
-          onError,
-        },
-      )
+        onSuccess: () => Promise.reject(error),
+        onError,
+      }))
 
       return (
         <div>
@@ -1188,15 +1112,13 @@ describe('useMutation', () => {
     const mutateFnError = new Error('mutateFnError')
 
     function Page() {
-      const mutation = createMutation(
-        async (_text: string) => {
+      const mutation = createMutation(() => ({
+        mutationFn: async (_text: string) => {
           await sleep(10)
           throw mutateFnError
         },
-        {
-          onError: () => Promise.reject(error),
-        },
-      )
+        onError: () => Promise.reject(error),
+      }))
 
       return (
         <div>
@@ -1229,16 +1151,14 @@ describe('useMutation', () => {
     const onError = jest.fn()
 
     function Page() {
-      const mutation = createMutation(
-        async (_text: string) => {
+      const mutation = createMutation(() => ({
+        mutationFn: async (_text: string) => {
           await sleep(10)
           throw mutateFnError
         },
-        {
-          onSettled: () => Promise.reject(error),
-          onError,
-        },
-      )
+        onSettled: () => Promise.reject(error),
+        onError,
+      }))
 
       return (
         <div>
@@ -1266,4 +1186,36 @@ describe('useMutation', () => {
 
     expect(onError).toHaveBeenCalledWith(mutateFnError, 'todo', undefined)
   })
+
+  it('should use provided custom queryClient', async () => {
+    function Page() {
+      const mutation = createMutation(
+        () => ({
+          mutationFn: async (text: string) => {
+            return Promise.resolve(text)
+          },
+        }),
+        () => queryClient,
+      )
+
+      return (
+        <div>
+          <button onClick={() => mutation.mutate('custom client')}>
+            mutate
+          </button>
+          <div>
+            data: {mutation.data ?? 'null'}, status: {mutation.status}
+          </div>
+        </div>
+      )
+    }
+
+    render(() => <Page></Page>)
+
+    await screen.findByText('data: null, status: idle')
+
+    fireEvent.click(screen.getByRole('button', { name: /mutate/i }))
+
+    await screen.findByText('data: custom client, status: success')
+  })
 })