@tanstack/solid-query 4.11.1 → 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/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);