@tanstack/solid-query 5.0.0-alpha.5 → 5.0.0-alpha.50

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

@@ -1,9 +1,10 @@
 import '@testing-library/jest-dom';
 import { createEffect, createMemo, createRenderEffect, createSignal, ErrorBoundary, Match, on, Switch, } from 'solid-js';
-import { fireEvent, render, screen, waitFor } from 'solid-testing-library';
+import { fireEvent, render, screen, waitFor } from '@solidjs/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 });
@@ -41,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
@@ -359,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 = vi.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 = vi.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 = vi.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 = vi.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 = vi.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 = vi.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 = vi.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;
@@ -965,7 +779,6 @@ describe('createQuery', () => {
                     count++;
                     return count === 1 ? result1 : result2;
                 },
-                notifyOnChangeProps: 'all',
             }));
             createRenderEffect(() => {
                 states.push({ ...state });
@@ -992,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 () => {
@@ -1752,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() {
@@ -2144,14 +1917,14 @@ describe('createQuery', () => {
         await waitFor(() => screen.getByText('error'));
         await waitFor(() => screen.getByText('Error test jaylen'));
     });
-    it('should throw error if queryFn throws and throwErrors is in use', async () => {
+    it('should throw error if queryFn throws and throwOnError is in use', async () => {
         const key = queryKey();
         function Page() {
             const state = createQuery(() => ({
                 queryKey: key,
                 queryFn: () => Promise.reject(new Error('Error test jaylen')),
                 retry: false,
-                throwErrors: true,
+                throwOnError: true,
             }));
             return (<div>
           <h1>{state.status}</h1>
@@ -2165,14 +1938,14 @@ describe('createQuery', () => {
       </QueryClientProvider>));
         await waitFor(() => screen.getByText('error boundary'));
     });
-    it('should update with data if we observe no properties and throwErrors', async () => {
+    it('should update with data if we observe no properties and throwOnError', async () => {
         const key = queryKey();
         let result;
         function Page() {
             const query = createQuery(() => ({
                 queryKey: key,
                 queryFn: () => Promise.resolve('data'),
-                throwErrors: true,
+                throwOnError: true,
             }));
             createEffect(() => {
                 result = query;
@@ -2192,7 +1965,7 @@ describe('createQuery', () => {
                 queryKey: key,
                 queryFn: () => Promise.reject(new Error('Local Error')),
                 retry: false,
-                throwErrors: (err) => err.message !== 'Local Error',
+                throwOnError: (err) => err.message !== 'Local Error',
             }));
             return (<div>
           <h1>{state.status}</h1>
@@ -2214,7 +1987,7 @@ describe('createQuery', () => {
                 queryKey: key,
                 queryFn: () => Promise.reject(new Error('Remote Error')),
                 retry: false,
-                throwErrors: (err) => err.message !== 'Local Error',
+                throwOnError: (err) => err.message !== 'Local Error',
             }));
             return (<div>
           <h1>{state.status}</h1>
@@ -2501,6 +2274,7 @@ describe('createQuery', () => {
                 queryFn: () => ({ count: 10 }),
                 staleTime: Infinity,
                 initialData: () => ({ count: count() }),
+                reconcile: false,
             }));
             createRenderEffect(() => {
                 states.push({ ...state });
@@ -3503,6 +3277,47 @@ 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 = vi.fn();
@@ -4513,31 +4328,6 @@ describe('createQuery', () => {
             error,
         });
     });
-    it('setQueryData - should not call onSuccess callback of active observers', async () => {
-        const key = queryKey();
-        const onSuccess = vi.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__/createQuery.types.test.jsx

@@ -1,4 +1,4 @@
-import { createQuery } from '../index';
+import { createQuery, queryOptions } from '../index';
 const doNotExecute = (_func) => true;
 describe('initialData', () => {
     describe('Config object overload', () => {
@@ -19,6 +19,24 @@ describe('initialData', () => {
                 return result;
             });
         });
+        it('TData should be defined when passed through queryOptions', () => {
+            doNotExecute(() => {
+                const options = queryOptions(() => ({
+                    queryKey: ['key'],
+                    queryFn: () => {
+                        return {
+                            wow: true,
+                        };
+                    },
+                    initialData: {
+                        wow: true,
+                    },
+                }));
+                const { data } = createQuery(options);
+                const result = true;
+                return result;
+            });
+        });
         it('TData should always be defined when initialData is provided as a function which ALWAYS returns the data', () => {
             doNotExecute(() => {
                 const { data } = createQuery(() => ({

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

@@ -1,4 +1,4 @@
-import { fireEvent, render, screen, waitFor } from 'solid-testing-library';
+import { fireEvent, render, screen, waitFor } from '@solidjs/testing-library';
 import { createRenderEffect, createSignal, ErrorBoundary, on, Show, Suspense, } from 'solid-js';
 import { createInfiniteQuery, createQuery, QueryCache, QueryClientProvider, } from '..';
 import { createQueryClient, queryKey, sleep } from './utils';
@@ -140,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 = vi.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 = vi.fn();
-        const successFn2 = vi.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();
@@ -410,7 +348,7 @@ describe("useQuery's in Suspense mode", () => {
         await waitFor(() => screen.getByText('Loading...'));
         await waitFor(() => screen.getByText('error boundary'));
     });
-    it('should not throw errors to the error boundary when throwErrors: false', async () => {
+    it('should not throw errors to the error boundary when throwOnError: false', async () => {
         const key = queryKey();
         function Page() {
             const state = createQuery(() => ({
@@ -420,7 +358,7 @@ describe("useQuery's in Suspense mode", () => {
                     throw new Error('Suspense Error a2x');
                 },
                 retry: false,
-                throwErrors: false,
+                throwOnError: false,
             }));
             // read state.data to trigger suspense.
             createRenderEffect(() => {
@@ -444,7 +382,7 @@ describe("useQuery's in Suspense mode", () => {
         await waitFor(() => screen.getByText('Loading...'));
         await waitFor(() => screen.getByText('rendered'));
     });
-    it('should throw errors to the error boundary when a throwErrors function returns true', async () => {
+    it('should throw errors to the error boundary when a throwOnError function returns true', async () => {
         const key = queryKey();
         function Page() {
             const state = createQuery(() => ({
@@ -454,7 +392,7 @@ describe("useQuery's in Suspense mode", () => {
                     return Promise.reject(new Error('Remote Error'));
                 },
                 retry: false,
-                throwErrors: (err) => err.message !== 'Local Error',
+                throwOnError: (err) => err.message !== 'Local Error',
             }));
             // read state.data to trigger suspense.
             createRenderEffect(() => {
@@ -478,7 +416,7 @@ describe("useQuery's in Suspense mode", () => {
         await waitFor(() => screen.getByText('Loading...'));
         await waitFor(() => screen.getByText('error boundary'));
     });
-    it('should not throw errors to the error boundary when a throwErrors function returns false', async () => {
+    it('should not throw errors to the error boundary when a throwOnError function returns false', async () => {
         const key = queryKey();
         function Page() {
             const state = createQuery(() => ({
@@ -489,7 +427,7 @@ describe("useQuery's in Suspense mode", () => {
                 },
                 retry: false,
                 suspense: true,
-                throwErrors: (err) => err.message !== 'Local Error',
+                throwOnError: (err) => err.message !== 'Local Error',
             }));
             // read state.data to trigger suspense.
             createRenderEffect(() => {

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

@@ -1,4 +1,4 @@
-import { fireEvent, render, screen, waitFor } from 'solid-testing-library';
+import { fireEvent, render, screen, waitFor } from '@solidjs/testing-library';
 import { createSignal, Show, startTransition, Suspense } from 'solid-js';
 import { createQuery, QueryCache, QueryClientProvider } from '..';
 import { createQueryClient, queryKey, sleep } from './utils';

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

@@ -1,4 +1,4 @@
-import { fireEvent, render, screen, waitFor } from 'solid-testing-library';
+import { fireEvent, render, screen, waitFor } from '@solidjs/testing-library';
 import { createEffect, createRenderEffect, createSignal, Show } from 'solid-js';
 import { createQuery, QueryCache, QueryClientProvider, useIsFetching } from '..';
 import { createQueryClient, queryKey, setActTimeout, sleep } from './utils';

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

@@ -1,10 +1,8 @@
-import { fireEvent, screen, waitFor } from 'solid-testing-library';
+import { fireEvent, render, screen, waitFor } from '@solidjs/testing-library';
 import { createMutation, QueryClientProvider, useIsMutating } from '..';
-import { createQueryClient, sleep } from './utils';
+import { createQueryClient, sleep, setActTimeout } from './utils';
 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';
+import * as QueryCore from '@tanstack/query-core';
 import { vi } from 'vitest';
 describe('useIsMutating', () => {
     it('should return the number of fetching mutations', async () => {
@@ -151,14 +149,14 @@ describe('useIsMutating', () => {
     it('should not change state if unmounted', async () => {
         // We have to mock the MutationCache to not unsubscribe
         // the listener when the component is unmounted
-        class MutationCacheMock extends MutationCacheModule.MutationCache {
+        class MutationCacheMock extends QueryCore.MutationCache {
             subscribe(listener) {
                 super.subscribe(listener);
                 return () => void 0;
             }
         }
         const MutationCacheSpy = vi
-            .spyOn(MutationCacheModule, 'MutationCache')
+            .spyOn(QueryCore, 'MutationCache')
             .mockImplementation((fn) => {
             return new MutationCacheMock(fn);
         });

package/build/source/__tests__/utils.jsx

@@ -1,4 +1,4 @@
-import { QueryClient } from '@tanstack/query-core';
+import { QueryClient } from '../QueryClient';
 import { createEffect, createSignal, onCleanup, Show } from 'solid-js';
 import { vi } from 'vitest';
 let queryKeyCount = 0;