@tanstack/solid-query 4.11.0 → 4.12.0

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

@@ -0,0 +1,39 @@
+import { fireEvent, render, screen, waitFor } from 'solid-testing-library';
+import { createSignal, Show, startTransition, Suspense } from 'solid-js';
+import { createQuery, QueryCache, QueryClientProvider } from '..';
+import { createQueryClient, queryKey, sleep } from './utils';
+describe("useQuery's in Suspense mode with transitions", () => {
+    const queryCache = new QueryCache();
+    const queryClient = createQueryClient({ queryCache });
+    it('should render the content when the transition is done', async () => {
+        const key = queryKey();
+        function Suspended() {
+            const state = createQuery(key, async () => {
+                await sleep(10);
+                return true;
+            });
+            return <Show when={state.data}>Message</Show>;
+        }
+        function Page() {
+            const [showSignal, setShowSignal] = createSignal(false);
+            return (<div>
+          <button aria-label="toggle" onClick={() => startTransition(() => setShowSignal((value) => !value))}>
+            {showSignal() ? 'Hide' : 'Show'}
+          </button>
+          <Suspense fallback="Loading">
+            <Show when={showSignal()}>
+              <Suspended />
+            </Show>
+          </Suspense>
+        </div>);
+        }
+        render(() => (<QueryClientProvider client={queryClient}>
+        <Page />
+      </QueryClientProvider>));
+        await waitFor(() => screen.getByText('Show'));
+        fireEvent.click(screen.getByLabelText('toggle'));
+        await waitFor(() => screen.getByText('Message'));
+        // verify that the button also updated. See https://github.com/solidjs/solid/issues/1249
+        await waitFor(() => screen.getByText('Hide'));
+    });
+});

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

@@ -0,0 +1,209 @@
+import { fireEvent, render, screen, waitFor } from 'solid-testing-library';
+import { createContext, createEffect, createRenderEffect, createSignal, ErrorBoundary, Show, } from 'solid-js';
+import { createQuery, QueryCache, QueryClientProvider, useIsFetching } from '..';
+import { createQueryClient, queryKey, setActTimeout, sleep } from './utils';
+describe('useIsFetching', () => {
+    // See https://github.com/tannerlinsley/react-query/issues/105
+    it('should update as queries start and stop fetching', async () => {
+        const queryCache = new QueryCache();
+        const queryClient = createQueryClient({ queryCache });
+        const key = queryKey();
+        function IsFetching() {
+            const isFetching = useIsFetching();
+            return <div>isFetching: {isFetching()}</div>;
+        }
+        function Query() {
+            const [ready, setReady] = createSignal(false);
+            createQuery(key, async () => {
+                await sleep(50);
+                return 'test';
+            }, {
+                get enabled() {
+                    return ready();
+                },
+            });
+            return <button onClick={() => setReady(true)}>setReady</button>;
+        }
+        function Page() {
+            return (<div>
+          <IsFetching />
+          <Query />
+        </div>);
+        }
+        render(() => (<QueryClientProvider client={queryClient}>
+        <Page />
+      </QueryClientProvider>));
+        await screen.findByText('isFetching: 0');
+        fireEvent.click(screen.getByRole('button', { name: /setReady/i }));
+        await screen.findByText('isFetching: 1');
+        await screen.findByText('isFetching: 0');
+    });
+    it('should not update state while rendering', async () => {
+        const queryCache = new QueryCache();
+        const queryClient = createQueryClient({ queryCache });
+        const key1 = queryKey();
+        const key2 = queryKey();
+        const isFetchings = [];
+        function IsFetching() {
+            const isFetching = useIsFetching();
+            createRenderEffect(() => {
+                isFetchings.push(isFetching());
+            });
+            return null;
+        }
+        function FirstQuery() {
+            createQuery(key1, async () => {
+                await sleep(100);
+                return 'data';
+            });
+            return null;
+        }
+        function SecondQuery() {
+            createQuery(key2, async () => {
+                await sleep(100);
+                return 'data';
+            });
+            return null;
+        }
+        function Page() {
+            const [renderSecond, setRenderSecond] = createSignal(false);
+            createEffect(() => {
+                setActTimeout(() => {
+                    setRenderSecond(true);
+                }, 50);
+            });
+            return (<>
+          <IsFetching />
+          <FirstQuery />
+          <Show when={renderSecond()}>
+            <SecondQuery />
+          </Show>
+        </>);
+        }
+        render(() => (<QueryClientProvider client={queryClient}>
+        <Page />
+      </QueryClientProvider>));
+        // unlike react, Updating renderSecond wont cause a rerender for FirstQuery
+        await waitFor(() => expect(isFetchings).toEqual([0, 1, 2, 1, 0]));
+    });
+    it('should be able to filter', async () => {
+        const queryClient = createQueryClient();
+        const key1 = queryKey();
+        const key2 = queryKey();
+        const isFetchings = [];
+        function One() {
+            createQuery(key1, async () => {
+                await sleep(10);
+                return 'test';
+            });
+            return null;
+        }
+        function Two() {
+            createQuery(key2, async () => {
+                await sleep(20);
+                return 'test';
+            });
+            return null;
+        }
+        function Page() {
+            const [started, setStarted] = createSignal(false);
+            const isFetching = useIsFetching(key1);
+            createRenderEffect(() => {
+                isFetchings.push(isFetching());
+            });
+            return (<div>
+          <button onClick={() => setStarted(true)}>setStarted</button>
+          <div>isFetching: {isFetching()}</div>
+          <Show when={started()}>
+            <>
+              <One />
+              <Two />
+            </>
+          </Show>
+        </div>);
+        }
+        render(() => (<QueryClientProvider client={queryClient}>
+        <Page />
+      </QueryClientProvider>));
+        await screen.findByText('isFetching: 0');
+        fireEvent.click(screen.getByRole('button', { name: /setStarted/i }));
+        await screen.findByText('isFetching: 1');
+        await screen.findByText('isFetching: 0');
+        // at no point should we have isFetching: 2
+        expect(isFetchings).toEqual(expect.not.arrayContaining([2]));
+    });
+    describe('with custom context', () => {
+        it('should update as queries start and stop fetching', async () => {
+            const context = createContext(undefined);
+            const queryCache = new QueryCache();
+            const queryClient = createQueryClient({ queryCache });
+            const key = queryKey();
+            function Page() {
+                const [ready, setReady] = createSignal(false);
+                const isFetching = useIsFetching(undefined, { context: context });
+                createQuery(key, async () => {
+                    await sleep(50);
+                    return 'test';
+                }, {
+                    get enabled() {
+                        return ready();
+                    },
+                    context,
+                });
+                return (<div>
+            <div>isFetching: {isFetching}</div>
+            <button onClick={() => setReady(true)}>setReady</button>
+          </div>);
+            }
+            render(() => (<QueryClientProvider client={queryClient} context={context}>
+          <Page />
+        </QueryClientProvider>));
+            await screen.findByText('isFetching: 0');
+            fireEvent.click(screen.getByRole('button', { name: /setReady/i }));
+            await screen.findByText('isFetching: 1');
+            await screen.findByText('isFetching: 0');
+        });
+        it('should throw if the context is not passed to useIsFetching', async () => {
+            const context = createContext(undefined);
+            const queryCache = new QueryCache();
+            const queryClient = createQueryClient({ queryCache });
+            const key = queryKey();
+            function Page() {
+                const isFetching = useIsFetching();
+                createQuery(key, async () => 'test', {
+                    enabled: true,
+                    context,
+                    useErrorBoundary: true,
+                });
+                return (<div>
+            <div>isFetching: {isFetching}</div>
+          </div>);
+            }
+            render(() => (<QueryClientProvider client={queryClient} context={context}>
+          <ErrorBoundary fallback={() => <div>error boundary</div>}>
+            <Page />
+          </ErrorBoundary>
+        </QueryClientProvider>));
+            await waitFor(() => screen.getByText('error boundary'));
+        });
+    });
+    it('should show the correct fetching state when mounted after a query', async () => {
+        const queryClient = createQueryClient();
+        const key = queryKey();
+        function Page() {
+            createQuery(key, async () => {
+                await sleep(10);
+                return 'test';
+            });
+            const isFetching = useIsFetching();
+            return (<div>
+          <div>isFetching: {isFetching()}</div>
+        </div>);
+        }
+        render(() => (<QueryClientProvider client={queryClient}>
+        <Page />
+      </QueryClientProvider>));
+        await screen.findByText('isFetching: 1');
+        await screen.findByText('isFetching: 0');
+    });
+});

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

@@ -0,0 +1,216 @@
+import { fireEvent, screen, waitFor } from 'solid-testing-library';
+import { createMutation, QueryClient, QueryClientProvider, useIsMutating, } from '..';
+import { createQueryClient, sleep } from './utils';
+import { createContext, createEffect, createRenderEffect, createSignal, ErrorBoundary, Show, } from 'solid-js';
+import { render } from 'solid-testing-library';
+import * as MutationCacheModule from '../../../query-core/src/mutationCache';
+import { setActTimeout } from './utils';
+describe('useIsMutating', () => {
+    it('should return the number of fetching mutations', async () => {
+        const isMutatings = [];
+        const queryClient = createQueryClient();
+        function IsMutating() {
+            const isMutating = useIsMutating();
+            createRenderEffect(() => {
+                isMutatings.push(isMutating());
+            });
+            return null;
+        }
+        function Mutations() {
+            const { mutate: mutate1 } = createMutation(['mutation1'], async () => {
+                await sleep(150);
+                return 'data';
+            });
+            const { mutate: mutate2 } = createMutation(['mutation2'], async () => {
+                await sleep(50);
+                return 'data';
+            });
+            createEffect(() => {
+                mutate1();
+                setActTimeout(() => {
+                    mutate2();
+                }, 50);
+            });
+            return null;
+        }
+        function Page() {
+            return (<div>
+          <IsMutating />
+          <Mutations />
+        </div>);
+        }
+        render(() => (<QueryClientProvider client={queryClient}>
+        <Page />
+      </QueryClientProvider>));
+        await waitFor(() => expect(isMutatings).toEqual([0, 1, 2, 1, 0]));
+    });
+    it('should filter correctly by mutationKey', async () => {
+        const isMutatings = [];
+        const queryClient = createQueryClient();
+        function IsMutating() {
+            const isMutating = useIsMutating(['mutation1']);
+            createRenderEffect(() => {
+                isMutatings.push(isMutating());
+            });
+            return null;
+        }
+        function Page() {
+            const { mutate: mutate1 } = createMutation(['mutation1'], async () => {
+                await sleep(100);
+                return 'data';
+            });
+            const { mutate: mutate2 } = createMutation(['mutation2'], async () => {
+                await sleep(100);
+                return 'data';
+            });
+            createEffect(() => {
+                mutate1();
+                mutate2();
+            });
+            return <IsMutating />;
+        }
+        render(() => (<QueryClientProvider client={queryClient}>
+        <Page />
+      </QueryClientProvider>));
+        // Unlike React, IsMutating Wont re-render twice with mutation2
+        await waitFor(() => expect(isMutatings).toEqual([0, 1, 0]));
+    });
+    it('should filter correctly by predicate', async () => {
+        const isMutatings = [];
+        const queryClient = createQueryClient();
+        function IsMutating() {
+            const isMutating = useIsMutating({
+                predicate: (mutation) => mutation.options.mutationKey?.[0] === 'mutation1',
+            });
+            createRenderEffect(() => {
+                isMutatings.push(isMutating());
+            });
+            return null;
+        }
+        function Page() {
+            const { mutate: mutate1 } = createMutation(['mutation1'], async () => {
+                await sleep(100);
+                return 'data';
+            });
+            const { mutate: mutate2 } = createMutation(['mutation2'], async () => {
+                await sleep(100);
+                return 'data';
+            });
+            createEffect(() => {
+                mutate1();
+                mutate2();
+            });
+            return <IsMutating />;
+        }
+        render(() => (<QueryClientProvider client={queryClient}>
+        <Page />
+      </QueryClientProvider>));
+        // Again, No unnecessary re-renders like React
+        await waitFor(() => expect(isMutatings).toEqual([0, 1, 0]));
+    });
+    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 {
+            subscribe(listener) {
+                super.subscribe(listener);
+                return () => void 0;
+            }
+        }
+        const MutationCacheSpy = jest
+            .spyOn(MutationCacheModule, 'MutationCache')
+            .mockImplementation((fn) => {
+            return new MutationCacheMock(fn);
+        });
+        const queryClient = createQueryClient();
+        function IsMutating() {
+            useIsMutating();
+            return null;
+        }
+        function Page() {
+            const [mounted, setMounted] = createSignal(true);
+            const { mutate: mutate1 } = createMutation(['mutation1'], async () => {
+                await sleep(10);
+                return 'data';
+            });
+            createEffect(() => {
+                mutate1();
+            });
+            return (<div>
+          <button onClick={() => setMounted(false)}>unmount</button>
+          <Show when={mounted()}>
+            <IsMutating />
+          </Show>
+        </div>);
+        }
+        render(() => (<QueryClientProvider client={queryClient}>
+        <Page />
+      </QueryClientProvider>));
+        fireEvent.click(screen.getByText('unmount'));
+        // Should not display the console error
+        // "Warning: Can't perform a React state update on an unmounted component"
+        await sleep(20);
+        MutationCacheSpy.mockRestore();
+    });
+    describe('with custom context', () => {
+        it('should return the number of fetching mutations', async () => {
+            const context = createContext(undefined);
+            const isMutatings = [];
+            const queryClient = new QueryClient();
+            function IsMutating() {
+                const isMutating = useIsMutating(undefined, { context });
+                createRenderEffect(() => {
+                    isMutatings.push(isMutating());
+                });
+                return null;
+            }
+            function Page() {
+                const { mutate: mutate1 } = createMutation(['mutation1'], async () => {
+                    await sleep(150);
+                    return 'data';
+                }, { context });
+                const { mutate: mutate2 } = createMutation(['mutation2'], async () => {
+                    await sleep(50);
+                    return 'data';
+                }, { context });
+                createEffect(() => {
+                    mutate1();
+                    setActTimeout(() => {
+                        mutate2();
+                    }, 50);
+                });
+                return <IsMutating />;
+            }
+            render(() => (<QueryClientProvider client={queryClient} context={context}>
+          <Page />
+        </QueryClientProvider>));
+            await waitFor(() => expect(isMutatings).toEqual([0, 1, 2, 1, 0]));
+        });
+        it('should throw if the context is not passed to useIsMutating', async () => {
+            const context = createContext(undefined);
+            const isMutatings = [];
+            const queryClient = new QueryClient();
+            function IsMutating() {
+                const isMutating = useIsMutating(undefined);
+                isMutatings.push(isMutating());
+                return null;
+            }
+            function Page() {
+                const { mutate } = createMutation(['mutation'], async () => 'data', {
+                    useErrorBoundary: true,
+                    context,
+                });
+                createEffect(() => {
+                    mutate();
+                });
+                return <IsMutating />;
+            }
+            render(() => (<QueryClientProvider client={queryClient} context={context}>
+          <ErrorBoundary fallback={() => <div>error boundary</div>}>
+            <Page />
+          </ErrorBoundary>
+        </QueryClientProvider>));
+            await waitFor(() => screen.getByText('error boundary'));
+        });
+    });
+});

package/build/solid/__tests__/utils.jsx

@@ -0,0 +1,55 @@
+import { QueryClient } from '@tanstack/query-core';
+import { createEffect, createSignal, onCleanup, Show } from 'solid-js';
+let queryKeyCount = 0;
+export function queryKey() {
+    const localQueryKeyCount = queryKeyCount++;
+    return () => [`query_${localQueryKeyCount}`];
+}
+export const Blink = (props) => {
+    const [shouldShow, setShouldShow] = createSignal(true);
+    createEffect(() => {
+        setShouldShow(true);
+        const timeout = setActTimeout(() => setShouldShow(false), props.duration);
+        onCleanup(() => clearTimeout(timeout));
+    });
+    return (<Show when={shouldShow()} fallback={<>off</>}>
+      <>{props.children}</>
+    </Show>);
+};
+export function createQueryClient(config) {
+    jest.spyOn(console, 'error').mockImplementation(() => undefined);
+    return new QueryClient({ logger: mockLogger, ...config });
+}
+export function mockVisibilityState(value) {
+    return jest.spyOn(document, 'visibilityState', 'get').mockReturnValue(value);
+}
+export function mockNavigatorOnLine(value) {
+    return jest.spyOn(navigator, 'onLine', 'get').mockReturnValue(value);
+}
+export const mockLogger = {
+    log: jest.fn(),
+    warn: jest.fn(),
+    error: jest.fn(),
+};
+export function sleep(timeout) {
+    return new Promise((resolve, _reject) => {
+        setTimeout(resolve, timeout);
+    });
+}
+export function setActTimeout(fn, ms) {
+    return setTimeout(() => {
+        fn();
+    }, ms);
+}
+/**
+ * Assert the parameter is of a specific type.
+ */
+export function expectType(_) {
+    return undefined;
+}
+/**
+ * Assert the parameter is not typed as `any`
+ */
+export function expectTypeNotAny(_) {
+    return undefined;
+}

package/build/solid/createBaseQuery.js

@@ -5,6 +5,7 @@ import { shouldThrowError } from './utils';
 // Base Query Function that is used to create the query.
 export function createBaseQuery(options, Observer) {
     const queryClient = useQueryClient({ context: options.context });
+    const emptyData = Symbol('empty');
     const defaultedOptions = queryClient.defaultQueryOptions(options);
     defaultedOptions._optimisticResults = 'optimistic';
     const observer = new Observer(queryClient, defaultedOptions);
@@ -14,6 +15,9 @@ export function createBaseQuery(options, Observer) {
     const [dataResource, { refetch, mutate }] = createResource(() => {
         return new Promise((resolve) => {
             if (!(state.isFetching && state.isLoading)) {
+                if (unwrap(state.data) === emptyData) {
+                    resolve(undefined);
+                }
                 resolve(unwrap(state.data));
             }
         });
@@ -26,7 +30,15 @@ export function createBaseQuery(options, Observer) {
     const unsubscribe = observer.subscribe((result) => {
         taskQueue.push(() => {
             batch(() => {
-                setState(unwrap(result));
+                const unwrappedResult = { ...unwrap(result) };
+                if (unwrappedResult.data === undefined) {
+                    // This is a hack to prevent Solid
+                    // from deleting the data property when it is `undefined`
+                    // ref: https://www.solidjs.com/docs/latest/api#updating-stores
+                    // @ts-ignore
+                    unwrappedResult.data = emptyData;
+                }
+                setState(unwrap(unwrappedResult));
                 mutate(() => unwrap(result.data));
                 refetch();
             });
@@ -59,7 +71,7 @@ export function createBaseQuery(options, Observer) {
     }));
     const handler = {
         get(target, prop) {
-            if (prop === 'data' && target.isLoading && target.isFetching) {
+            if (prop === 'data') {
                 return dataResource();
             }
             return Reflect.get(target, prop);

package/build/umd/index.development.js

@@ -1476,7 +1476,7 @@
             variables: this.options.variables
           }); // Notify cache callback
 
-          (_this$mutationCache$c = (_this$mutationCache$c2 = this.mutationCache.config).onMutate) == null ? void 0 : _this$mutationCache$c.call(_this$mutationCache$c2, this.state.variables, this);
+          await ((_this$mutationCache$c = (_this$mutationCache$c2 = this.mutationCache.config).onMutate) == null ? void 0 : _this$mutationCache$c.call(_this$mutationCache$c2, this.state.variables, this));
           const context = await ((_this$options$onMutat = (_this$options = this.options).onMutate) == null ? void 0 : _this$options$onMutat.call(_this$options, this.state.variables));
 
           if (context !== this.state.context) {
@@ -1490,7 +1490,7 @@
 
         const data = await executeMutation(); // Notify cache callback
 
-        (_this$mutationCache$c3 = (_this$mutationCache$c4 = this.mutationCache.config).onSuccess) == null ? void 0 : _this$mutationCache$c3.call(_this$mutationCache$c4, data, this.state.variables, this.state.context, this);
+        await ((_this$mutationCache$c3 = (_this$mutationCache$c4 = this.mutationCache.config).onSuccess) == null ? void 0 : _this$mutationCache$c3.call(_this$mutationCache$c4, data, this.state.variables, this.state.context, this));
         await ((_this$options$onSucce = (_this$options2 = this.options).onSuccess) == null ? void 0 : _this$options$onSucce.call(_this$options2, data, this.state.variables, this.state.context));
         await ((_this$options$onSettl = (_this$options3 = this.options).onSettled) == null ? void 0 : _this$options$onSettl.call(_this$options3, data, null, this.state.variables, this.state.context));
         this.dispatch({
@@ -1503,7 +1503,7 @@
           var _this$mutationCache$c5, _this$mutationCache$c6, _this$options$onError, _this$options4, _this$options$onSettl2, _this$options5;
 
           // Notify cache callback
-          (_this$mutationCache$c5 = (_this$mutationCache$c6 = this.mutationCache.config).onError) == null ? void 0 : _this$mutationCache$c5.call(_this$mutationCache$c6, error, this.state.variables, this.state.context, this);
+          await ((_this$mutationCache$c5 = (_this$mutationCache$c6 = this.mutationCache.config).onError) == null ? void 0 : _this$mutationCache$c5.call(_this$mutationCache$c6, error, this.state.variables, this.state.context, this));
 
           if ("development" !== 'production') {
             this.logger.error(error);
@@ -3224,6 +3224,7 @@
     const queryClient = useQueryClient({
       context: options.context
     });
+    const emptyData = Symbol('empty');
     const defaultedOptions = queryClient.defaultQueryOptions(options);
     defaultedOptions._optimisticResults = 'optimistic';
     const observer = new Observer(queryClient, defaultedOptions);
@@ -3235,6 +3236,10 @@
     }] = solidJs.createResource(() => {
       return new Promise(resolve => {
         if (!(state.isFetching && state.isLoading)) {
+          if (store.unwrap(state.data) === emptyData) {
+            resolve(undefined);
+          }
+
           resolve(store.unwrap(state.data));
         }
       });
@@ -3247,7 +3252,18 @@
     const unsubscribe = observer.subscribe(result => {
       taskQueue.push(() => {
         solidJs.batch(() => {
-          setState(store.unwrap(result));
+          const unwrappedResult = { ...store.unwrap(result)
+          };
+
+          if (unwrappedResult.data === undefined) {
+            // This is a hack to prevent Solid
+            // from deleting the data property when it is `undefined`
+            // ref: https://www.solidjs.com/docs/latest/api#updating-stores
+            // @ts-ignore
+            unwrappedResult.data = emptyData;
+          }
+
+          setState(store.unwrap(unwrappedResult));
           mutate(() => store.unwrap(result.data));
           refetch();
         });
@@ -3279,7 +3295,7 @@
     }));
     const handler = {
       get(target, prop) {
-        if (prop === 'data' && target.isLoading && target.isFetching) {
+        if (prop === 'data') {
           return dataResource();
         }