@tanstack/solid-query 5.0.0-alpha.34 → 5.0.0-alpha.38

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

@@ -0,0 +1,42 @@
+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';
+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(() => ({
+                queryKey: key,
+                queryFn: 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/source/__tests__/useIsFetching.test.jsx

@@ -0,0 +1,190 @@
+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';
+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(() => ({
+                queryKey: key,
+                queryFn: async () => {
+                    await sleep(50);
+                    return 'test';
+                },
+                enabled: 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(() => ({
+                queryKey: key1,
+                queryFn: async () => {
+                    await sleep(150);
+                    return 'data';
+                },
+            }));
+            return null;
+        }
+        function SecondQuery() {
+            createQuery(() => ({
+                queryKey: key2,
+                queryFn: async () => {
+                    await sleep(200);
+                    return 'data';
+                },
+            }));
+            return null;
+        }
+        function Page() {
+            const [renderSecond, setRenderSecond] = createSignal(false);
+            createEffect(() => {
+                setActTimeout(() => {
+                    setRenderSecond(true);
+                }, 100);
+            });
+            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(() => ({
+                queryKey: key1,
+                queryFn: async () => {
+                    await sleep(10);
+                    return 'test';
+                },
+            }));
+            return null;
+        }
+        function Two() {
+            createQuery(() => ({
+                queryKey: key2,
+                queryFn: async () => {
+                    await sleep(20);
+                    return 'test';
+                },
+            }));
+            return null;
+        }
+        function Page() {
+            const [started, setStarted] = createSignal(false);
+            const isFetching = useIsFetching(() => ({
+                queryKey: 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]));
+    });
+    it('should show the correct fetching state when mounted after a query', async () => {
+        const queryClient = createQueryClient();
+        const key = queryKey();
+        function Page() {
+            createQuery(() => ({
+                queryKey: key,
+                queryFn: 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');
+    });
+    it('should use provided custom queryClient', async () => {
+        const queryClient = createQueryClient();
+        const key = queryKey();
+        function Page() {
+            createQuery(() => ({
+                queryKey: key,
+                queryFn: async () => {
+                    await sleep(10);
+                    return 'test';
+                },
+            }), () => queryClient);
+            const isFetching = useIsFetching(undefined, () => queryClient);
+            return (<div>
+          <div>isFetching: {isFetching}</div>
+        </div>);
+        }
+        render(() => <Page></Page>);
+        await screen.findByText('isFetching: 1');
+    });
+});

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

@@ -0,0 +1,196 @@
+import { fireEvent, render, screen, waitFor } from '@solidjs/testing-library';
+import { createMutation, QueryClientProvider, useIsMutating } from '..';
+import { createQueryClient, sleep, setActTimeout } from './utils';
+import { createEffect, createRenderEffect, createSignal, Show } from 'solid-js';
+import * as MutationCacheModule from '../../../query-core/src/mutationCache';
+import { vi } from 'vitest';
+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(() => ({
+                mutationKey: ['mutation1'],
+                mutationFn: async () => {
+                    await sleep(150);
+                    return 'data';
+                },
+            }));
+            const { mutate: mutate2 } = createMutation(() => ({
+                mutationKey: ['mutation2'],
+                mutationFn: 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(() => ({ mutationKey: ['mutation1'] }));
+            createRenderEffect(() => {
+                isMutatings.push(isMutating());
+            });
+            return null;
+        }
+        function Page() {
+            const { mutate: mutate1 } = createMutation(() => ({
+                mutationKey: ['mutation1'],
+                mutationFn: async () => {
+                    await sleep(100);
+                    return 'data';
+                },
+            }));
+            const { mutate: mutate2 } = createMutation(() => ({
+                mutationKey: ['mutation2'],
+                mutationFn: 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(() => ({
+                mutationKey: ['mutation1'],
+                mutationFn: async () => {
+                    await sleep(100);
+                    return 'data';
+                },
+            }));
+            const { mutate: mutate2 } = createMutation(() => ({
+                mutationKey: ['mutation2'],
+                mutationFn: 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 use provided custom queryClient', async () => {
+        const queryClient = createQueryClient();
+        function Page() {
+            const isMutating = useIsMutating(undefined, () => queryClient);
+            const { mutate } = createMutation(() => ({
+                mutationKey: ['mutation1'],
+                mutationFn: async () => {
+                    await sleep(10);
+                    return 'data';
+                },
+            }), () => queryClient);
+            createEffect(() => {
+                mutate();
+            });
+            return (<div>
+          <div>mutating: {isMutating}</div>
+        </div>);
+        }
+        render(() => <Page></Page>);
+        await waitFor(() => screen.findByText('mutating: 1'));
+    });
+    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 = vi
+            .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(() => ({
+                mutationKey: ['mutation1'],
+                mutationFn: 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();
+    });
+});

package/build/source/__tests__/utils.jsx

@@ -0,0 +1,50 @@
+import { QueryClient } from '../QueryClient';
+import { createEffect, createSignal, onCleanup, Show } from 'solid-js';
+import { vi } from 'vitest';
+let queryKeyCount = 0;
+export function queryKey() {
+    queryKeyCount++;
+    return [`query_${queryKeyCount}`];
+}
+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) {
+    return new QueryClient(config);
+}
+export function mockVisibilityState(value) {
+    return vi.spyOn(document, 'visibilityState', 'get').mockReturnValue(value);
+}
+export function mockNavigatorOnLine(value) {
+    return vi.spyOn(navigator, 'onLine', 'get').mockReturnValue(value);
+}
+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/source/createBaseQuery.js

@@ -0,0 +1,173 @@
+import { hydrate, notifyManager } from '@tanstack/query-core';
+import { isServer } from 'solid-js/web';
+import { createComputed, createMemo, createResource, on, onCleanup, } from 'solid-js';
+import { createStore, reconcile, unwrap } from 'solid-js/store';
+import { useQueryClient } from './QueryClientProvider';
+import { shouldThrowError } from './utils';
+function reconcileFn(store, result, reconcileOption) {
+    if (reconcileOption === false)
+        return result;
+    if (typeof reconcileOption === 'function') {
+        const newData = reconcileOption(store.data, result.data);
+        return { ...result, data: newData };
+    }
+    const newData = reconcile(result.data, { key: reconcileOption })(store.data);
+    return { ...result, data: newData };
+}
+// Base Query Function that is used to create the query.
+export function createBaseQuery(options, Observer, queryClient) {
+    const client = createMemo(() => useQueryClient(queryClient?.()));
+    const defaultedOptions = client().defaultQueryOptions(options());
+    defaultedOptions._optimisticResults = 'optimistic';
+    defaultedOptions.structuralSharing = false;
+    if (isServer) {
+        defaultedOptions.retry = false;
+        defaultedOptions.throwOnError = true;
+    }
+    const observer = new Observer(client(), defaultedOptions);
+    const [state, setState] = createStore(observer.getOptimisticResult(defaultedOptions));
+    const createServerSubscriber = (resolve, reject) => {
+        return observer.subscribe((result) => {
+            notifyManager.batchCalls(() => {
+                const query = observer.getCurrentQuery();
+                const { refetch, ...rest } = unwrap(result);
+                const unwrappedResult = {
+                    ...rest,
+                    // hydrate() expects a QueryState object, which is similar but not
+                    // quite the same as a QueryObserverResult object. Thus, for now, we're
+                    // copying over the missing properties from state in order to support hydration
+                    dataUpdateCount: query.state.dataUpdateCount,
+                    fetchFailureCount: query.state.fetchFailureCount,
+                    // Removing these properties since they might not be serializable
+                    // fetchFailureReason: query.state.fetchFailureReason,
+                    // fetchMeta: query.state.fetchMeta,
+                    isInvalidated: query.state.isInvalidated,
+                };
+                if (unwrappedResult.isError) {
+                    if (process.env['NODE_ENV'] === 'development') {
+                        console.error(unwrappedResult.error);
+                    }
+                    reject(unwrappedResult.error);
+                }
+                if (unwrappedResult.isSuccess) {
+                    // Use of any here is fine
+                    // We cannot include refetch since it is not serializable
+                    resolve(unwrappedResult);
+                }
+            })();
+        });
+    };
+    const createClientSubscriber = () => {
+        return observer.subscribe((result) => {
+            notifyManager.batchCalls(() => {
+                // @ts-expect-error - This will error because the reconcile option does not
+                // exist on the query-core QueryObserverResult type
+                const reconcileOptions = observer.options.reconcile;
+                // If the query has data we dont suspend but instead mutate the resource
+                // This could happen when placeholderData/initialData is defined
+                if (queryResource()?.data && result.data && !queryResource.loading) {
+                    setState((store) => {
+                        return reconcileFn(store, result, reconcileOptions === undefined ? 'id' : reconcileOptions);
+                    });
+                    mutate(state);
+                }
+                else {
+                    setState((store) => {
+                        return reconcileFn(store, result, reconcileOptions === undefined ? 'id' : reconcileOptions);
+                    });
+                    refetch();
+                }
+            })();
+        });
+    };
+    /**
+     * Unsubscribe is set lazily, so that we can subscribe after hydration when needed.
+     */
+    let unsubscribe = null;
+    const [queryResource, { refetch, mutate }] = createResource(() => {
+        return new Promise((resolve, reject) => {
+            if (isServer) {
+                unsubscribe = createServerSubscriber(resolve, reject);
+            }
+            else {
+                if (!unsubscribe) {
+                    unsubscribe = createClientSubscriber();
+                }
+            }
+            if (!state.isLoading) {
+                resolve(state);
+            }
+        });
+    }, {
+        initialValue: state,
+        // If initialData is provided, we resolve the resource immediately
+        ssrLoadFrom: options().initialData ? 'initial' : 'server',
+        get deferStream() {
+            return options().deferStream;
+        },
+        /**
+         * If this resource was populated on the server (either sync render, or streamed in over time), onHydrated
+         * will be called. This is the point at which we can hydrate the query cache state, and setup the query subscriber.
+         *
+         * Leveraging onHydrated allows us to plug into the async and streaming support that solidjs resources already support.
+         *
+         * Note that this is only invoked on the client, for queries that were originally run on the server.
+         */
+        onHydrated(_k, info) {
+            if (info.value) {
+                hydrate(client(), {
+                    queries: [
+                        {
+                            queryKey: defaultedOptions.queryKey,
+                            queryHash: defaultedOptions.queryHash,
+                            state: info.value,
+                        },
+                    ],
+                });
+            }
+            if (!unsubscribe) {
+                /**
+                 * Do not refetch query on mount if query was fetched on server,
+                 * even if `staleTime` is not set.
+                 */
+                const newOptions = { ...defaultedOptions };
+                if (defaultedOptions.staleTime || !defaultedOptions.initialData) {
+                    newOptions.refetchOnMount = false;
+                }
+                // Setting the options as an immutable object to prevent
+                // wonky behavior with observer subscriptions
+                observer.setOptions(newOptions);
+                setState(observer.getOptimisticResult(newOptions));
+                unsubscribe = createClientSubscriber();
+            }
+        },
+    });
+    onCleanup(() => {
+        if (unsubscribe) {
+            unsubscribe();
+            unsubscribe = null;
+        }
+    });
+    createComputed(on(() => client().defaultQueryOptions(options()), () => observer.setOptions(client().defaultQueryOptions(options())), {
+        // Defer because we don't need to trigger on first render
+        // This only cares about changes to options after the observer is created
+        defer: true,
+    }));
+    createComputed(on(() => state.status, () => {
+        if (state.isError &&
+            !state.isFetching &&
+            shouldThrowError(observer.options.throwOnError, [
+                state.error,
+                observer.getCurrentQuery(),
+            ])) {
+            throw state.error;
+        }
+    }));
+    const handler = {
+        get(target, prop) {
+            const val = queryResource()?.[prop];
+            return val !== undefined ? val : Reflect.get(target, prop);
+        },
+    };
+    return new Proxy(state, handler);
+}

package/build/source/createInfiniteQuery.js

@@ -0,0 +1,8 @@
+import { InfiniteQueryObserver } from '@tanstack/query-core';
+import { createBaseQuery } from './createBaseQuery';
+import { createMemo } from 'solid-js';
+export function createInfiniteQuery(options, queryClient) {
+    return createBaseQuery(createMemo(() => options()), 
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+    InfiniteQueryObserver, queryClient);
+}