@tanstack/solid-query 5.0.0-alpha.6 → 5.0.0-alpha.61

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

@@ -1,42 +0,0 @@
-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(() => ({
-                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

@@ -1,190 +0,0 @@
-import { fireEvent, render, screen, waitFor } from 'solid-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

@@ -1,198 +0,0 @@
-import { fireEvent, screen, waitFor } from 'solid-testing-library';
-import { createMutation, QueryClientProvider, useIsMutating } from '..';
-import { createQueryClient, sleep } 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 { 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

@@ -1,50 +0,0 @@
-import { QueryClient } from '@tanstack/query-core';
-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

@@ -1,147 +0,0 @@
-import { hydrate } from '@tanstack/query-core';
-import { notifyManager } from '@tanstack/query-core';
-import { isServer } from 'solid-js/web';
-import { createComputed, createMemo, createResource, on, onCleanup, onMount, } from 'solid-js';
-import { createStore, unwrap } from 'solid-js/store';
-import { useQueryClient } from './QueryClientProvider';
-import { shouldThrowError } from './utils';
-// 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';
-    if (isServer) {
-        defaultedOptions.retry = false;
-        defaultedOptions.throwErrors = 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 unwrappedResult = { ...unwrap(result) };
-                if (unwrappedResult.isError) {
-                    if (process.env['NODE_ENV'] === 'development') {
-                        console.error(unwrappedResult.error);
-                    }
-                    reject(unwrappedResult.error);
-                }
-                if (unwrappedResult.isSuccess) {
-                    resolve(unwrappedResult);
-                }
-            })();
-        });
-    };
-    const createClientSubscriber = () => {
-        return observer.subscribe((result) => {
-            notifyManager.batchCalls(() => {
-                const unwrappedResult = { ...unwrap(result) };
-                // If the query has data we dont suspend but instead mutate the resource
-                // This could happen when placeholderData/initialData is defined
-                if (queryResource()?.data &&
-                    unwrappedResult.data &&
-                    !queryResource.loading) {
-                    setState(unwrappedResult);
-                    mutate(state);
-                }
-                else {
-                    setState(unwrappedResult);
-                    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;
-        }
-    });
-    onMount(() => {
-        observer.setOptions(defaultedOptions, { listeners: false });
-    });
-    createComputed(() => {
-        observer.setOptions(client().defaultQueryOptions(options()));
-    });
-    createComputed(on(() => state.status, () => {
-        if (state.isError &&
-            !state.isFetching &&
-            shouldThrowError(observer.options.throwErrors, [
-                state.error,
-                observer.getCurrentQuery(),
-            ])) {
-            throw state.error;
-        }
-    }));
-    const handler = {
-        get(target, prop) {
-            if (prop === 'data') {
-                return queryResource()?.data;
-            }
-            return Reflect.get(target, prop);
-        },
-    };
-    return new Proxy(state, handler);
-}

package/build/source/createInfiniteQuery.js

@@ -1,8 +0,0 @@
-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);
-}

package/build/source/createMutation.js

@@ -1,38 +0,0 @@
-import { MutationObserver } from '@tanstack/query-core';
-import { useQueryClient } from './QueryClientProvider';
-import { createComputed, onCleanup, on } from 'solid-js';
-import { createStore } from 'solid-js/store';
-import { shouldThrowError } from './utils';
-// HOOK
-export function createMutation(options, queryClient) {
-    const client = useQueryClient(queryClient?.());
-    const observer = new MutationObserver(client, options());
-    const mutate = (variables, mutateOptions) => {
-        observer.mutate(variables, mutateOptions).catch(noop);
-    };
-    const [state, setState] = createStore({
-        ...observer.getCurrentResult(),
-        mutate,
-        mutateAsync: observer.getCurrentResult().mutate,
-    });
-    createComputed(() => {
-        observer.setOptions(options());
-    });
-    createComputed(on(() => state.status, () => {
-        if (state.isError &&
-            shouldThrowError(observer.options.throwErrors, [state.error])) {
-            throw state.error;
-        }
-    }));
-    const unsubscribe = observer.subscribe((result) => {
-        setState({
-            ...result,
-            mutate,
-            mutateAsync: result.mutate,
-        });
-    });
-    onCleanup(unsubscribe);
-    return state;
-}
-// eslint-disable-next-line @typescript-eslint/no-empty-function
-function noop() { }