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

package/build/{solid → source}/__tests__/createMutation.test.jsx

@@ -1,15 +1,17 @@
 import '@testing-library/jest-dom';
-import { createContext, createEffect, createRenderEffect, createSignal, ErrorBoundary, } from 'solid-js';
+import { createEffect, createRenderEffect, createSignal, ErrorBoundary, } from 'solid-js';
 import { fireEvent, render, screen, waitFor } from 'solid-testing-library';
 import { createMutation, MutationCache, QueryCache, QueryClientProvider, } from '..';
 import { createQueryClient, mockNavigatorOnLine, queryKey, setActTimeout, 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>
           <h1>{mutation.data ?? 'empty'}</h1>
           <button onClick={() => mutation.reset()}>reset</button>
@@ -31,11 +33,13 @@ describe('useMutation', () => {
     });
     it('should be able to reset `error`', async () => {
         function Page() {
-            const mutation = createMutation(() => {
-                const err = new Error('Expected mock error. All is well!');
-                err.stack = '';
-                return Promise.reject(err);
-            });
+            const mutation = createMutation(() => ({
+                mutationFn: () => {
+                    const err = new Error('Expected mock error. All is well!');
+                    err.stack = '';
+                    return Promise.reject(err);
+                },
+            }));
             return (<div>
           {mutation.error && <h1>{mutation.error.message}</h1>}
           <button onClick={() => mutation.reset()}>reset</button>
@@ -62,14 +66,15 @@ describe('useMutation', () => {
         const onSuccessMock = jest.fn();
         const onSettledMock = jest.fn();
         function Page() {
-            const mutation = createMutation((vars) => Promise.resolve(vars.count), {
+            const mutation = createMutation(() => ({
+                mutationFn: (vars) => Promise.resolve(vars.count),
                 onSuccess: (data) => {
                     onSuccessMock(data);
                 },
                 onSettled: (data) => {
                     onSettledMock(data);
                 },
-            });
+            }));
             return (<div>
           <h1>{count()}</h1>
           <button onClick={() => {
@@ -107,19 +112,21 @@ describe('useMutation', () => {
         const [count, setCount] = createSignal(0);
         const mutateFn = jest.fn();
         mutateFn.mockImplementationOnce(() => {
-            return Promise.reject('Error test Jonas');
+            return Promise.reject(new Error('Error test Jonas'));
         });
         mutateFn.mockImplementation(async (value) => {
             await sleep(10);
             return Promise.resolve(value);
         });
         function Page() {
-            const mutation = createMutation(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);
                     return mutation.mutate({ count: count() });
@@ -138,7 +145,7 @@ describe('useMutation', () => {
         await waitFor(() => screen.getByText('Failed 1 times'));
         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'));
@@ -149,18 +156,19 @@ describe('useMutation', () => {
         const onSettledMock = jest.fn();
         const [count, setCount] = createSignal(0);
         function Page() {
-            const mutation = createMutation((vars) => {
-                const error = new Error(`Expected mock error. All is well! ${vars.count}`);
-                error.stack = '';
-                return Promise.reject(error);
-            }, {
+            const mutation = createMutation(() => ({
+                mutationFn: (vars) => {
+                    const error = new Error(`Expected mock error. All is well! ${vars.count}`);
+                    error.stack = '';
+                    return Promise.reject(error);
+                },
                 onError: (error) => {
                     onErrorMock(error.message);
                 },
                 onSettled: (_data, error) => {
                     onSettledMock(error?.message);
                 },
-            });
+            }));
             return (<div>
           <h1>{count()}</h1>
           <button onClick={() => {
@@ -197,14 +205,15 @@ describe('useMutation', () => {
     it('should be able to override the useMutation success callbacks', async () => {
         const callbacks = [];
         function Page() {
-            const mutation = createMutation(async (text) => text, {
+            const mutation = createMutation(() => ({
+                mutationFn: async (text) => text,
                 onSuccess: async () => {
                     callbacks.push('useMutation.onSuccess');
                 },
                 onSettled: async () => {
                     callbacks.push('useMutation.onSettled');
                 },
-            });
+            }));
             createEffect(() => {
                 const { mutateAsync } = mutation;
                 setActTimeout(async () => {
@@ -239,14 +248,15 @@ describe('useMutation', () => {
     it('should be able to override the error callbacks when using mutateAsync', async () => {
         const callbacks = [];
         function Page() {
-            const mutation = createMutation(async (_text) => Promise.reject('oops'), {
+            const mutation = createMutation(() => ({
+                mutationFn: async (_text) => Promise.reject(new Error('oops')),
                 onError: async () => {
                     callbacks.push('useMutation.onError');
                 },
                 onSettled: async () => {
                     callbacks.push('useMutation.onSettled');
                 },
-            });
+            }));
             createEffect(() => {
                 const { mutateAsync } = mutation;
                 setActTimeout(async () => {
@@ -261,7 +271,7 @@ describe('useMutation', () => {
                         });
                     }
                     catch (error) {
-                        callbacks.push(`mutateAsync.error:${error}`);
+                        callbacks.push(`mutateAsync.error:${error.message}`);
                     }
                 }, 10);
             });
@@ -281,7 +291,7 @@ describe('useMutation', () => {
     });
     it('should be able to use mutation defaults', async () => {
         const key = queryKey();
-        queryClient.setMutationDefaults(key(), {
+        queryClient.setMutationDefaults(key, {
             mutationFn: async (text) => {
                 await sleep(10);
                 return text;
@@ -289,7 +299,9 @@ describe('useMutation', () => {
         });
         const states = [];
         function Page() {
-            const mutation = createMutation(key());
+            const mutation = createMutation(() => ({
+                mutationKey: key,
+            }));
             createRenderEffect(() => {
                 states.push({ ...mutation });
             });
@@ -306,20 +318,21 @@ describe('useMutation', () => {
       </QueryClientProvider>));
         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) => {
-                count++;
-                return Promise.reject('oops');
-            }, {
+            const mutation = createMutation(() => ({
+                mutationFn: (_text) => {
+                    count++;
+                    return Promise.reject(new Error('oops'));
+                },
                 retry: 1,
                 retryDelay: 5,
-            });
+            }));
             createEffect(() => {
                 const { mutate } = mutation;
                 setActTimeout(() => {
@@ -338,13 +351,14 @@ describe('useMutation', () => {
         const onlineMock = mockNavigatorOnLine(false);
         let count = 0;
         function Page() {
-            const mutation = createMutation((_text) => {
-                count++;
-                return Promise.reject(new Error('oops'));
-            }, {
+            const mutation = createMutation(() => ({
+                mutationFn: (_text) => {
+                    count++;
+                    return Promise.reject(new Error('oops'));
+                },
                 retry: 1,
                 retryDelay: 5,
-            });
+            }));
             return (<div>
           <button onClick={() => mutation.mutate('todo')}>mutate</button>
           <div>
@@ -360,7 +374,7 @@ describe('useMutation', () => {
         });
         fireEvent.click(screen.getByRole('button', { name: /mutate/i }));
         await waitFor(() => {
-            expect(screen.getByText('error: null, status: loading, isPaused: true')).toBeInTheDocument();
+            expect(screen.getByText('error: null, status: pending, isPaused: true')).toBeInTheDocument();
         });
         expect(count).toBe(0);
         onlineMock.mockReturnValue(true);
@@ -377,13 +391,14 @@ describe('useMutation', () => {
         const onMutate = jest.fn();
         let count = 0;
         function Page() {
-            const mutation = createMutation(async (_text) => {
-                count++;
-                await sleep(10);
-                return count;
-            }, {
+            const mutation = createMutation(() => ({
+                mutationFn: async (_text) => {
+                    count++;
+                    await sleep(10);
+                    return count;
+                },
                 onMutate,
-            });
+            }));
             return (<div>
           <button onClick={() => mutation.mutate('todo')}>mutate</button>
           <div>
@@ -397,7 +412,7 @@ describe('useMutation', () => {
       </QueryClientProvider>));
         await screen.findByText('data: null, status: idle, isPaused: false');
         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');
         onlineMock.mockReturnValue(true);
@@ -412,11 +427,13 @@ describe('useMutation', () => {
         let count = 0;
         const states = [];
         function Page() {
-            const mutation = createMutation(async (_text) => {
-                count++;
-                await sleep(10);
-                return count;
-            });
+            const mutation = createMutation(() => ({
+                mutationFn: async (_text) => {
+                    count++;
+                    await sleep(10);
+                    return count;
+                },
+            }));
             createRenderEffect(() => {
                 states.push(`${mutation.status}, ${mutation.isPaused}`);
             });
@@ -433,10 +450,10 @@ describe('useMutation', () => {
       </QueryClientProvider>));
         await screen.findByText('data: null, status: idle, isPaused: false');
         fireEvent.click(screen.getByRole('button', { name: /mutate/i }));
-        await screen.findByText('data: null, status: loading, isPaused: true');
-        // no intermediate 'loading, false' state is expected because we don't start mutating!
+        await screen.findByText('data: null, status: pending, isPaused: true');
+        // 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'));
         await screen.findByText('data: 1, status: success, isPaused: false');
@@ -447,15 +464,18 @@ describe('useMutation', () => {
         let count = 0;
         const states = [];
         function Page() {
-            const mutation = createMutation(async (_text) => {
-                await sleep(1);
-                count++;
-                return count > 1 ? Promise.resolve('data') : Promise.reject('oops');
-            }, {
+            const mutation = createMutation(() => ({
+                mutationFn: async (_text) => {
+                    await sleep(1);
+                    count++;
+                    return count > 1
+                        ? Promise.resolve('data')
+                        : Promise.reject(new Error('oops'));
+                },
                 retry: 1,
                 retryDelay: 5,
                 networkMode: 'offlineFirst',
-            });
+            }));
             createRenderEffect(() => {
                 states.push({ ...mutation });
             });
@@ -473,41 +493,41 @@ describe('useMutation', () => {
         await sleep(50);
         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);
         window.dispatchEvent(new Event('online'));
         await sleep(50);
         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,
@@ -517,7 +537,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() {
@@ -533,13 +553,16 @@ describe('useMutation', () => {
         fireEvent.click(screen.getByText('mutate'));
         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(() => {
-                const err = new Error('Expected mock error. All is well!');
-                err.stack = '';
-                return Promise.reject(err);
-            }, { useErrorBoundary: true });
+            const mutation = createMutation(() => ({
+                mutationFn: () => {
+                    const err = new Error('Expected mock error. All is well!');
+                    err.stack = '';
+                    return Promise.reject(err);
+                },
+                throwErrors: true,
+            }));
             return (<div>
           <button onClick={() => mutation.mutate()}>mutate</button>
         </div>);
@@ -556,19 +579,20 @@ describe('useMutation', () => {
             expect(screen.queryByText('error')).not.toBeNull();
         });
     });
-    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(() => {
-                const err = new Error('mock error');
-                err.stack = '';
-                return Promise.reject(err);
-            }, {
-                useErrorBoundary: () => {
+            const mutation = createMutation(() => ({
+                mutationFn: () => {
+                    const err = new Error('mock error');
+                    err.stack = '';
+                    return Promise.reject(err);
+                },
+                throwErrors: () => {
                     boundary = !boundary;
                     return !boundary;
                 },
-            });
+            }));
             return (<div>
           <button onClick={() => mutation.mutate()}>mutate</button>
           {mutation.error && mutation.error.message}
@@ -608,14 +632,16 @@ describe('useMutation', () => {
         const metaSuccessMessage = 'mutation succeeded';
         const metaErrorMessage = 'mutation failed';
         function Page() {
-            const mutationSucceed = createMutation(async () => '', {
+            const mutationSucceed = createMutation(() => ({
+                mutationFn: async () => '',
                 meta: { metaSuccessMessage },
-            });
-            const mutationError = createMutation(async () => {
-                throw new Error('');
-            }, {
+            }));
+            const mutationError = createMutation(() => ({
+                mutationFn: async () => {
+                    throw new Error('');
+                },
                 meta: { metaErrorMessage },
-            });
+            }));
             return (<div>
           <button onClick={() => mutationSucceed.mutate()}>succeed</button>
           <button onClick={() => mutationError.mutate()}>error</button>
@@ -652,16 +678,17 @@ describe('useMutation', () => {
         </div>);
         }
         function Component() {
-            const mutation = createMutation(async (_text) => {
-                count++;
-                await sleep(10);
-                return count;
-            }, {
-                mutationKey: mutationKey(),
-                cacheTime: 0,
+            const mutation = createMutation(() => ({
+                mutationFn: async (_text) => {
+                    count++;
+                    await sleep(10);
+                    return count;
+                },
+                mutationKey: mutationKey,
+                gcTime: 0,
                 onSuccess,
                 onSettled,
-            });
+            }));
             return (<div>
           <button onClick={() => mutation.mutate('todo', {
                     onSuccess: onSuccessMutate,
@@ -682,7 +709,7 @@ describe('useMutation', () => {
         fireEvent.click(screen.getByRole('button', { name: /mutate/i }));
         fireEvent.click(screen.getByRole('button', { name: /hide/i }));
         await waitFor(() => {
-            expect(queryClient.getMutationCache().findAll({ mutationKey: mutationKey() })).toHaveLength(0);
+            expect(queryClient.getMutationCache().findAll({ mutationKey: mutationKey })).toHaveLength(0);
         });
         expect(count).toBe(1);
         expect(onSuccess).toHaveBeenCalledTimes(1);
@@ -690,49 +717,6 @@ describe('useMutation', () => {
         expect(onSuccessMutate).toHaveBeenCalledTimes(0);
         expect(onSettledMutate).toHaveBeenCalledTimes(0);
     });
-    describe('with custom context', () => {
-        it('should be able to reset `data`', async () => {
-            const context = createContext(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(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();
@@ -740,14 +724,15 @@ describe('useMutation', () => {
         const onSettledMutate = jest.fn();
         let count = 0;
         function Page() {
-            const mutation = createMutation(async (_text) => {
-                count++;
-                await sleep(10);
-                return `result${count}`;
-            }, {
+            const mutation = createMutation(() => ({
+                mutationFn: async (_text) => {
+                    count++;
+                    await sleep(10);
+                    return `result${count}`;
+                },
                 onSuccess,
                 onSettled,
-            });
+            }));
             return (<div>
           <button onClick={() => mutation.mutate('todo', {
                     onSuccess: onSuccessMutate,
@@ -779,13 +764,14 @@ describe('useMutation', () => {
         const error = new Error('error from onSuccess');
         const onError = jest.fn();
         function Page() {
-            const mutation = createMutation(async (_text) => {
-                await sleep(10);
-                return 'result';
-            }, {
+            const mutation = createMutation(() => ({
+                mutationFn: async (_text) => {
+                    await sleep(10);
+                    return 'result';
+                },
                 onSuccess: () => Promise.reject(error),
                 onError,
-            });
+            }));
             return (<div>
           <button onClick={() => mutation.mutate('todo')}>mutate</button>
           <div>status: {mutation.status}</div>
@@ -803,12 +789,13 @@ describe('useMutation', () => {
         const error = new Error('error from onError');
         const mutateFnError = new Error('mutateFnError');
         function Page() {
-            const mutation = createMutation(async (_text) => {
-                await sleep(10);
-                throw mutateFnError;
-            }, {
+            const mutation = createMutation(() => ({
+                mutationFn: async (_text) => {
+                    await sleep(10);
+                    throw mutateFnError;
+                },
                 onError: () => Promise.reject(error),
-            });
+            }));
             return (<div>
           <button onClick={() => mutation.mutate('todo')}>mutate</button>
           <div>
@@ -830,13 +817,14 @@ describe('useMutation', () => {
         const mutateFnError = new Error('mutateFnError');
         const onError = jest.fn();
         function Page() {
-            const mutation = createMutation(async (_text) => {
-                await sleep(10);
-                throw mutateFnError;
-            }, {
+            const mutation = createMutation(() => ({
+                mutationFn: async (_text) => {
+                    await sleep(10);
+                    throw mutateFnError;
+                },
                 onSettled: () => Promise.reject(error),
                 onError,
-            });
+            }));
             return (<div>
           <button onClick={() => mutation.mutate('todo')}>mutate</button>
           <div>
@@ -854,4 +842,25 @@ describe('useMutation', () => {
         await screen.findByText('error: mutateFnError, status: error');
         expect(onError).toHaveBeenCalledWith(mutateFnError, 'todo', undefined);
     });
+    it('should use provided custom queryClient', async () => {
+        function Page() {
+            const mutation = createMutation(() => ({
+                mutationFn: async (text) => {
+                    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');
+    });
 });