@tanstack/solid-query 5.0.0-alpha.2 → 5.0.0-alpha.21

package/build/source/__tests__/createQuery.test.jsx

@@ -3,6 +3,8 @@ import { createEffect, createMemo, createRenderEffect, createSignal, ErrorBounda
 import { fireEvent, render, screen, waitFor } from 'solid-testing-library';
 import { createQuery, QueryCache, QueryClientProvider, keepPreviousData, } from '..';
 import { Blink, createQueryClient, expectType, mockNavigatorOnLine, mockVisibilityState, queryKey, setActTimeout, sleep, } from './utils';
+import { vi } from 'vitest';
+import { reconcile } from 'solid-js/store';
 describe('createQuery', () => {
     const queryCache = new QueryCache();
     const queryClient = createQueryClient({ queryCache });
@@ -40,20 +42,16 @@ describe('createQuery', () => {
             createQuery(() => ({
                 queryKey: [key],
                 queryFn: async () => true,
-                onSuccess: (data) => expectType(data),
-                onSettled: (data) => expectType(data),
             }));
             // it should be possible to specify a union type as result type
             const unionTypeSync = createQuery(() => ({
                 queryKey: key,
                 queryFn: () => (Math.random() > 0.5 ? 'a' : 'b'),
-                onSuccess: (data) => expectType(data),
             }));
             expectType(unionTypeSync.data);
             const unionTypeAsync = createQuery(() => ({
                 queryKey: key,
                 queryFn: () => Promise.resolve(Math.random() > 0.5 ? 'a' : 'b'),
-                onSuccess: (data) => expectType(data),
             }));
             expectType(unionTypeAsync.data);
             // should error when the query function result does not match with the specified type
@@ -358,189 +356,6 @@ describe('createQuery', () => {
             isFetchedAfterMount: true,
         });
     });
-    it('should call onSuccess after a query has been fetched', async () => {
-        const key = queryKey();
-        const states = [];
-        const onSuccess = jest.fn();
-        function Page() {
-            const state = createQuery(() => ({
-                queryKey: key,
-                queryFn: async () => {
-                    await sleep(10);
-                    return 'data';
-                },
-                onSuccess,
-            }));
-            createRenderEffect(() => {
-                states.push({ ...state });
-            });
-            return <div>data: {state.data}</div>;
-        }
-        render(() => (<QueryClientProvider client={queryClient}>
-        <Page />
-      </QueryClientProvider>));
-        await screen.findByText('data: data');
-        expect(states.length).toBe(2);
-        expect(onSuccess).toHaveBeenCalledTimes(1);
-        expect(onSuccess).toHaveBeenCalledWith('data');
-    });
-    it('should call onSuccess after a disabled query has been fetched', async () => {
-        const key = queryKey();
-        const states = [];
-        const onSuccess = jest.fn();
-        function Page() {
-            const state = createQuery(() => ({
-                queryKey: key,
-                queryFn: () => 'data',
-                enabled: false,
-                onSuccess,
-            }));
-            createRenderEffect(() => {
-                states.push({ ...state });
-            });
-            createEffect(() => {
-                const refetch = state.refetch;
-                setActTimeout(() => {
-                    refetch();
-                }, 10);
-            });
-            return null;
-        }
-        render(() => (<QueryClientProvider client={queryClient}>
-        <Page />
-      </QueryClientProvider>));
-        await sleep(50);
-        expect(onSuccess).toHaveBeenCalledTimes(1);
-        expect(onSuccess).toHaveBeenCalledWith('data');
-    });
-    it('should not call onSuccess if a component has unmounted', async () => {
-        const key = queryKey();
-        const states = [];
-        const onSuccess = jest.fn();
-        function Page() {
-            const [show, setShow] = createSignal(true);
-            createEffect(() => {
-                setShow(false);
-            });
-            return <>{show() && <Component />}</>;
-        }
-        function Component() {
-            const state = createQuery(() => ({
-                queryKey: key,
-                queryFn: async () => {
-                    await sleep(10);
-                    return 'data';
-                },
-                onSuccess,
-            }));
-            createRenderEffect(() => {
-                states.push({ ...state });
-            });
-            return null;
-        }
-        render(() => (<QueryClientProvider client={queryClient}>
-        <Page />
-      </QueryClientProvider>));
-        await sleep(50);
-        expect(states.length).toBe(1);
-        expect(onSuccess).toHaveBeenCalledTimes(0);
-    });
-    it('should call onError after a query has been fetched with an error', async () => {
-        const key = queryKey();
-        const states = [];
-        const onError = jest.fn();
-        function Page() {
-            const state = createQuery(() => ({
-                queryKey: key,
-                queryFn: () => Promise.reject(new Error('error')),
-                retry: false,
-                onError,
-            }));
-            createRenderEffect(() => {
-                states.push({ ...state });
-            });
-            return null;
-        }
-        render(() => (<QueryClientProvider client={queryClient}>
-        <Page />
-      </QueryClientProvider>));
-        await sleep(10);
-        expect(states.length).toBe(2);
-        expect(onError).toHaveBeenCalledTimes(1);
-        expect(onError).toHaveBeenCalledWith(new Error('error'));
-    });
-    it('should not call onError when receiving a CancelledError', async () => {
-        const key = queryKey();
-        const onError = jest.fn();
-        function Page() {
-            const state = createQuery(() => ({
-                queryKey: key,
-                queryFn: async () => {
-                    await sleep(10);
-                    return 23;
-                },
-                onError,
-            }));
-            return (<span>
-          status: {state.status}, fetchStatus: {state.fetchStatus}
-        </span>);
-        }
-        render(() => (<QueryClientProvider client={queryClient}>
-        <Page />
-      </QueryClientProvider>));
-        await sleep(5);
-        await queryClient.cancelQueries({ queryKey: key });
-        // query cancellation will reset the query to it's initial state
-        await waitFor(() => screen.getByText('status: pending, fetchStatus: idle'));
-        expect(onError).not.toHaveBeenCalled();
-    });
-    it('should call onSettled after a query has been fetched', async () => {
-        const key = queryKey();
-        const states = [];
-        const onSettled = jest.fn();
-        function Page() {
-            const state = createQuery(() => ({
-                queryKey: key,
-                queryFn: () => 'data',
-                onSettled,
-            }));
-            createRenderEffect(() => {
-                states.push({ ...state });
-            });
-            return null;
-        }
-        render(() => (<QueryClientProvider client={queryClient}>
-        <Page />
-      </QueryClientProvider>));
-        await sleep(10);
-        expect(states.length).toBe(2);
-        expect(onSettled).toHaveBeenCalledTimes(1);
-        expect(onSettled).toHaveBeenCalledWith('data', null);
-    });
-    it('should call onSettled after a query has been fetched with an error', async () => {
-        const key = queryKey();
-        const states = [];
-        const onSettled = jest.fn();
-        function Page() {
-            const state = createQuery(() => ({
-                queryKey: key,
-                queryFn: () => Promise.reject('error'),
-                retry: false,
-                onSettled,
-            }));
-            createRenderEffect(() => {
-                states.push({ ...state });
-            });
-            return null;
-        }
-        render(() => (<QueryClientProvider client={queryClient}>
-        <Page />
-      </QueryClientProvider>));
-        await sleep(10);
-        expect(states.length).toBe(2);
-        expect(onSettled).toHaveBeenCalledTimes(1);
-        expect(onSettled).toHaveBeenCalledWith(undefined, 'error');
-    });
     it('should not cancel an ongoing fetch when refetch is called with cancelRefetch=false if we have data already', async () => {
         const key = queryKey();
         let fetchCount = 0;
@@ -964,7 +779,6 @@ describe('createQuery', () => {
                     count++;
                     return count === 1 ? result1 : result2;
                 },
-                notifyOnChangeProps: 'all',
             }));
             createRenderEffect(() => {
                 states.push({ ...state });
@@ -991,9 +805,8 @@ describe('createQuery', () => {
         const newTodo2 = newTodos?.[1];
         expect(todos).toEqual(result1);
         expect(newTodos).toEqual(result2);
-        expect(newTodos).not.toBe(todos);
         expect(newTodo1).toBe(todo1);
-        expect(newTodo2).not.toBe(todo2);
+        expect(newTodo2).toBe(todo2);
         return null;
     });
     it('should use query function from hook when the existing query does not have a query function', async () => {
@@ -1751,45 +1564,6 @@ describe('createQuery', () => {
         // There wiil only be one pass
         expect(renders).toBe(1);
     });
-    it('should batch re-renders including hook callbacks', async () => {
-        const key = queryKey();
-        let renders = 0;
-        let callbackCount = 0;
-        const queryFn = async () => {
-            await sleep(10);
-            return 'data';
-        };
-        function Page() {
-            const [count, setCount] = createSignal(0);
-            createQuery(() => ({
-                queryKey: key,
-                queryFn,
-                onSuccess: () => {
-                    setCount((x) => x + 1);
-                },
-            }));
-            createQuery(() => ({
-                queryKey: key,
-                queryFn,
-                onSuccess: () => {
-                    setCount((x) => x + 1);
-                },
-            }));
-            createEffect(() => {
-                renders++;
-                callbackCount = count();
-            });
-            return <div>count: {count()}</div>;
-        }
-        render(() => (<QueryClientProvider client={queryClient}>
-        <Page />
-      </QueryClientProvider>));
-        await waitFor(() => screen.getByText('count: 2'));
-        // Should be 3 instead of 5
-        expect(renders).toBe(3);
-        // Both callbacks should have been executed
-        expect(callbackCount).toBe(2);
-    });
     it('should render latest data even if react has discarded certain renders', async () => {
         const key = queryKey();
         function Page() {
@@ -1887,7 +1661,7 @@ describe('createQuery', () => {
     });
     it('should not refetch query on focus when `enabled` is set to `false`', async () => {
         const key = queryKey();
-        const queryFn = jest.fn().mockReturnValue('data');
+        const queryFn = vi.fn().mockReturnValue('data');
         function Page() {
             const { data = 'default' } = createQuery(() => ({
                 queryKey: key,
@@ -2500,6 +2274,7 @@ describe('createQuery', () => {
                 queryFn: () => ({ count: 10 }),
                 staleTime: Infinity,
                 initialData: () => ({ count: count() }),
+                reconcile: false,
             }));
             createRenderEffect(() => {
                 states.push({ ...state });
@@ -2523,7 +2298,7 @@ describe('createQuery', () => {
     });
     it('should retry specified number of times', async () => {
         const key = queryKey();
-        const queryFn = jest.fn();
+        const queryFn = vi.fn();
         queryFn.mockImplementation(() => {
             return Promise.reject(new Error('Error test Barrett'));
         });
@@ -2552,7 +2327,7 @@ describe('createQuery', () => {
     });
     it('should not retry if retry function `false`', async () => {
         const key = queryKey();
-        const queryFn = jest.fn();
+        const queryFn = vi.fn();
         queryFn.mockImplementationOnce(() => {
             return Promise.reject(new Error('Error test Tanner'));
         });
@@ -2585,7 +2360,7 @@ describe('createQuery', () => {
     });
     it('should extract retryDelay from error', async () => {
         const key = queryKey();
-        const queryFn = jest.fn();
+        const queryFn = vi.fn();
         queryFn.mockImplementation(() => {
             return Promise.reject({ delay: 50 });
         });
@@ -2747,9 +2522,9 @@ describe('createQuery', () => {
     it('should refetch if stale after a prefetch', async () => {
         const key = queryKey();
         const states = [];
-        const queryFn = jest.fn();
+        const queryFn = vi.fn();
         queryFn.mockImplementation(() => 'data');
-        const prefetchQueryFn = jest.fn();
+        const prefetchQueryFn = vi.fn();
         prefetchQueryFn.mockImplementation(() => 'not yet...');
         await queryClient.prefetchQuery({
             queryKey: key,
@@ -2773,9 +2548,9 @@ describe('createQuery', () => {
     });
     it('should not refetch if not stale after a prefetch', async () => {
         const key = queryKey();
-        const queryFn = jest.fn();
+        const queryFn = vi.fn();
         queryFn.mockImplementation(() => 'data');
-        const prefetchQueryFn = jest.fn();
+        const prefetchQueryFn = vi.fn();
         prefetchQueryFn.mockImplementation(async () => {
             await sleep(10);
             return 'not yet...';
@@ -2977,7 +2752,7 @@ describe('createQuery', () => {
     });
     it('it should support enabled:false in query object syntax', async () => {
         const key = queryKey();
-        const queryFn = jest.fn();
+        const queryFn = vi.fn();
         queryFn.mockImplementation(() => 'data');
         function Page() {
             const { fetchStatus } = createQuery(() => ({
@@ -3028,7 +2803,7 @@ describe('createQuery', () => {
         <Page />
       </QueryClientProvider>));
         await waitFor(() => screen.getByText('fetched data'));
-        const setTimeoutSpy = jest.spyOn(window, 'setTimeout');
+        const setTimeoutSpy = vi.spyOn(window, 'setTimeout');
         result.unmount();
         expect(setTimeoutSpy).not.toHaveBeenCalled();
     });
@@ -3046,14 +2821,14 @@ describe('createQuery', () => {
         <Page />
       </QueryClientProvider>));
         await waitFor(() => screen.getByText('fetched data'));
-        const setTimeoutSpy = jest.spyOn(window, 'setTimeout');
+        const setTimeoutSpy = vi.spyOn(window, 'setTimeout');
         result.unmount();
         expect(setTimeoutSpy).toHaveBeenLastCalledWith(expect.any(Function), 1000 * 60 * 10);
     });
     it('should not cause memo churn when data does not change', async () => {
         const key = queryKey();
-        const queryFn = jest.fn().mockReturnValue('data');
-        const memoFn = jest.fn();
+        const queryFn = vi.fn().mockReturnValue('data');
+        const memoFn = vi.fn();
         function Page() {
             const result = createQuery(() => ({
                 queryKey: key,
@@ -3234,7 +3009,7 @@ describe('createQuery', () => {
     });
     it('should refetch if any query instance becomes enabled', async () => {
         const key = queryKey();
-        const queryFn = jest.fn().mockReturnValue('data');
+        const queryFn = vi.fn().mockReturnValue('data');
         function Disabled() {
             createQuery(() => ({ queryKey: key, queryFn, enabled: false }));
             return null;
@@ -3502,12 +3277,53 @@ describe('createQuery', () => {
         // effect should not be triggered again due to structural sharing
         expect(states).toHaveLength(1);
     });
+    it('The reconcile fn callback should correctly maintain referential equality', async () => {
+        const key1 = queryKey();
+        const states = [];
+        function Page() {
+            const [forceValue, setForceValue] = createSignal(1);
+            const state = createQuery(() => ({
+                queryKey: key1,
+                queryFn: async () => {
+                    await sleep(10);
+                    return [1, 2];
+                },
+                select: (res) => res.map((x) => x + 1),
+                reconcile(oldData, newData) {
+                    return reconcile(newData)(oldData);
+                },
+            }));
+            createEffect(() => {
+                if (state.data) {
+                    states.push(state.data);
+                }
+            });
+            const forceUpdate = () => {
+                setForceValue((prev) => prev + 1);
+            };
+            return (<div>
+          <h2>Data: {JSON.stringify(state.data)}</h2>
+          <h2>forceValue: {forceValue}</h2>
+          <button onClick={forceUpdate}>forceUpdate</button>
+        </div>);
+        }
+        render(() => (<QueryClientProvider client={queryClient}>
+        <Page />
+      </QueryClientProvider>));
+        await waitFor(() => screen.getByText('Data: [2,3]'));
+        expect(states).toHaveLength(1);
+        fireEvent.click(screen.getByRole('button', { name: /forceUpdate/i }));
+        await waitFor(() => screen.getByText('forceValue: 2'));
+        await waitFor(() => screen.getByText('Data: [2,3]'));
+        // effect should not be triggered again due to structural sharing
+        expect(states).toHaveLength(1);
+    });
     it('should cancel the query function when there are no more subscriptions', async () => {
         const key = queryKey();
-        let cancelFn = jest.fn();
+        let cancelFn = vi.fn();
         const queryFn = ({ signal }) => {
             const promise = new Promise((resolve, reject) => {
-                cancelFn = jest.fn(() => reject('Cancelled'));
+                cancelFn = vi.fn(() => reject('Cancelled'));
                 signal?.addEventListener('abort', cancelFn);
                 sleep(20).then(() => resolve('OK'));
             });
@@ -3767,7 +3583,7 @@ describe('createQuery', () => {
         expect(renders).toBe(hashes);
     });
     it('should refetch when changed enabled to true in error state', async () => {
-        const queryFn = jest.fn();
+        const queryFn = vi.fn();
         queryFn.mockImplementation(async () => {
             await sleep(10);
             return Promise.reject(new Error('Suspense Error Bingo'));
@@ -4512,31 +4328,6 @@ describe('createQuery', () => {
             error,
         });
     });
-    it('setQueryData - should not call onSuccess callback of active observers', async () => {
-        const key = queryKey();
-        const onSuccess = jest.fn();
-        function Page() {
-            const state = createQuery(() => ({
-                queryKey: key,
-                queryFn: () => 'data',
-                onSuccess,
-            }));
-            return (<div>
-          <div>data: {state.data}</div>
-          <button onClick={() => queryClient.setQueryData(key, 'newData')}>
-            setQueryData
-          </button>
-        </div>);
-        }
-        render(() => (<QueryClientProvider client={queryClient}>
-        <Page />
-      </QueryClientProvider>));
-        await waitFor(() => screen.getByText('data: data'));
-        fireEvent.click(screen.getByRole('button', { name: /setQueryData/i }));
-        await waitFor(() => screen.getByText('data: newData'));
-        expect(onSuccess).toHaveBeenCalledTimes(1);
-        expect(onSuccess).toHaveBeenCalledWith('data');
-    });
     it('setQueryData - should respect updatedAt', async () => {
         const key = queryKey();
         function Page() {

package/build/source/__tests__/suspense.test.jsx

@@ -2,6 +2,7 @@ import { fireEvent, render, screen, waitFor } from 'solid-testing-library';
 import { createRenderEffect, createSignal, ErrorBoundary, on, Show, Suspense, } from 'solid-js';
 import { createInfiniteQuery, createQuery, QueryCache, QueryClientProvider, } from '..';
 import { createQueryClient, queryKey, sleep } from './utils';
+import { vi } from 'vitest';
 describe("useQuery's in Suspense mode", () => {
     const queryCache = new QueryCache();
     const queryClient = createQueryClient({ queryCache });
@@ -91,7 +92,7 @@ describe("useQuery's in Suspense mode", () => {
     });
     it('should not call the queryFn twice when used in Suspense mode', async () => {
         const key = queryKey();
-        const queryFn = jest.fn();
+        const queryFn = vi.fn();
         queryFn.mockImplementation(() => {
             sleep(10);
             return 'data';
@@ -139,68 +140,6 @@ describe("useQuery's in Suspense mode", () => {
         expect(screen.queryByText('rendered')).toBeNull();
         expect(queryCache.find({ queryKey: key })?.getObserversCount()).toBe(0);
     });
-    it('should call onSuccess on the first successful call', async () => {
-        const key = queryKey();
-        const successFn = jest.fn();
-        function Page() {
-            createQuery(() => ({
-                queryKey: [key],
-                queryFn: async () => {
-                    await sleep(10);
-                    return key;
-                },
-                suspense: true,
-                select: () => 'selected',
-                onSuccess: successFn,
-            }));
-            return <>rendered</>;
-        }
-        render(() => (<QueryClientProvider client={queryClient}>
-        <Suspense fallback="loading">
-          <Page />
-        </Suspense>
-      </QueryClientProvider>));
-        await waitFor(() => screen.getByText('rendered'));
-        await waitFor(() => expect(successFn).toHaveBeenCalledTimes(1));
-        await waitFor(() => expect(successFn).toHaveBeenCalledWith('selected'));
-    });
-    it('should call every onSuccess handler within a suspense boundary', async () => {
-        const key = queryKey();
-        const successFn1 = jest.fn();
-        const successFn2 = jest.fn();
-        function FirstComponent() {
-            createQuery(() => ({
-                queryKey: key,
-                queryFn: () => {
-                    sleep(10);
-                    return 'data';
-                },
-                onSuccess: successFn1,
-            }));
-            return <span>first</span>;
-        }
-        function SecondComponent() {
-            createQuery(() => ({
-                queryKey: key,
-                queryFn: () => {
-                    sleep(10);
-                    return 'data';
-                },
-                onSuccess: successFn2,
-            }));
-            return <span>second</span>;
-        }
-        render(() => (<QueryClientProvider client={queryClient}>
-        <Suspense fallback="loading">
-          <FirstComponent />
-          <SecondComponent />
-        </Suspense>
-        ,
-      </QueryClientProvider>));
-        await waitFor(() => screen.getByText('second'));
-        await waitFor(() => expect(successFn1).toHaveBeenCalledTimes(1));
-        await waitFor(() => expect(successFn2).toHaveBeenCalledTimes(1));
-    });
     // https://github.com/tannerlinsley/react-query/issues/468
     it('should reset error state if new component instances are mounted', async () => {
         const key = queryKey();
@@ -514,7 +453,7 @@ describe("useQuery's in Suspense mode", () => {
     });
     it('should not call the queryFn when not enabled', async () => {
         const key = queryKey();
-        const queryFn = jest.fn();
+        const queryFn = vi.fn();
         queryFn.mockImplementation(async () => {
             await sleep(10);
             return '23';

package/build/source/__tests__/useIsFetching.test.jsx

@@ -120,9 +120,7 @@ describe('useIsFetching', () => {
         function Page() {
             const [started, setStarted] = createSignal(false);
             const isFetching = useIsFetching(() => ({
-                filters: {
-                    queryKey: key1,
-                },
+                queryKey: key1,
             }));
             createRenderEffect(() => {
                 isFetchings.push(isFetching());
@@ -181,7 +179,7 @@ describe('useIsFetching', () => {
                     return 'test';
                 },
             }), () => queryClient);
-            const isFetching = useIsFetching(() => ({ queryClient }));
+            const isFetching = useIsFetching(undefined, () => queryClient);
             return (<div>
           <div>isFetching: {isFetching}</div>
         </div>);