@trpc/react-query 10.43.0 → 11.0.0-next.91

package/dist/createHooksInternal-dce6e141.js

@@ -0,0 +1,435 @@
+import { createRecursiveProxy } from '@trpc/server/shared';
+import { useQuery, useSuspenseQuery, useQueryClient, useMutation, hashKey, useInfiniteQuery, useSuspenseInfiniteQuery, useQueries } from '@tanstack/react-query';
+import { createTRPCUntypedClient } from '@trpc/client';
+import React, { useRef, useState, useEffect, useCallback, useMemo } from 'react';
+import { a as getQueryKeyInternal, T as TRPCContext } from './utilsProxy-7e396600.js';
+
+/**
+ * Create proxy for decorating procedures
+ * @internal
+ */
+function createReactDecoration(name, hooks) {
+    return createRecursiveProxy(({ path, args }) => {
+        const pathCopy = [name, ...path];
+        // The last arg is for instance `.useMutation` or `.useQuery()`
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        const lastArg = pathCopy.pop();
+        if (lastArg === 'useMutation') {
+            return hooks[lastArg](pathCopy, ...args);
+        }
+        if (lastArg === '_def') {
+            return {
+                path: pathCopy,
+            };
+        }
+        const [input, ...rest] = args;
+        const opts = rest[0] || {};
+        return hooks[lastArg](pathCopy, input, opts);
+    });
+}
+
+/**
+ * Create proxy for `useQueries` options
+ * @internal
+ */
+function createUseQueries(client) {
+    return createRecursiveProxy((opts) => {
+        const arrayPath = opts.path;
+        const dotPath = arrayPath.join('.');
+        const [input, _opts] = opts.args;
+        const options = {
+            queryKey: getQueryKeyInternal(arrayPath, input, 'query'),
+            queryFn: () => {
+                return client.query(dotPath, input, _opts?.trpc);
+            },
+            ..._opts,
+        };
+        return options;
+    });
+}
+
+function getClientArgs(queryKey, opts, pageParam) {
+    const path = queryKey[0];
+    const input = queryKey[1]?.input;
+    if (pageParam)
+        input.cursor = pageParam;
+    return [path.join('.'), input, opts?.trpc];
+}
+
+/**
+ * Makes a stable reference of the `trpc` prop
+ */
+function useHookResult(value) {
+    const ref = useRef(value);
+    ref.current.path = value.path;
+    return ref.current;
+}
+
+/**
+ * @internal
+ */
+function createRootHooks(config) {
+    const mutationSuccessOverride = config?.overrides?.useMutation?.onSuccess ??
+        ((options) => options.originalFn());
+    const Context = (config?.context ??
+        TRPCContext);
+    const createClient = (opts) => {
+        return createTRPCUntypedClient(opts);
+    };
+    const TRPCProvider = (props) => {
+        const { abortOnUnmount = false, client, queryClient, ssrContext } = props;
+        const [ssrState, setSSRState] = useState(props.ssrState ?? false);
+        useEffect(() => {
+            // Only updating state to `mounted` if we are using SSR.
+            // This makes it so we don't have an unnecessary re-render when opting out of SSR.
+            setSSRState((state) => (state ? 'mounted' : false));
+        }, []);
+        return (React.createElement(Context.Provider, { value: {
+                abortOnUnmount,
+                queryClient,
+                client,
+                ssrContext: ssrContext ?? null,
+                ssrState,
+                fetchQuery: useCallback((queryKey, opts) => {
+                    return queryClient.fetchQuery({
+                        ...opts,
+                        queryKey,
+                        queryFn: () => client.query(...getClientArgs(queryKey, opts)),
+                    });
+                }, [client, queryClient]),
+                fetchInfiniteQuery: useCallback((queryKey, opts) => {
+                    return queryClient.fetchInfiniteQuery({
+                        ...opts,
+                        queryKey,
+                        queryFn: ({ pageParam }) => {
+                            return client.query(...getClientArgs(queryKey, opts, pageParam));
+                        },
+                        initialPageParam: opts?.initialCursor ?? null,
+                    });
+                }, [client, queryClient]),
+                prefetchQuery: useCallback((queryKey, opts) => {
+                    return queryClient.prefetchQuery({
+                        ...opts,
+                        queryKey,
+                        queryFn: () => client.query(...getClientArgs(queryKey, opts)),
+                    });
+                }, [client, queryClient]),
+                prefetchInfiniteQuery: useCallback((queryKey, opts) => {
+                    return queryClient.prefetchInfiniteQuery({
+                        ...opts,
+                        queryKey,
+                        queryFn: ({ pageParam }) => {
+                            return client.query(...getClientArgs(queryKey, opts, pageParam));
+                        },
+                        initialPageParam: opts?.initialCursor ?? null,
+                    });
+                }, [client, queryClient]),
+                ensureQueryData: useCallback((queryKey, opts) => {
+                    return queryClient.ensureQueryData({
+                        ...opts,
+                        queryKey,
+                        queryFn: () => client.query(...getClientArgs(queryKey, opts)),
+                    });
+                }, [client, queryClient]),
+                invalidateQueries: useCallback((queryKey, filters, options) => {
+                    return queryClient.invalidateQueries({
+                        ...filters,
+                        queryKey,
+                    }, options);
+                }, [queryClient]),
+                resetQueries: useCallback((queryKey, filters, options) => {
+                    return queryClient.resetQueries({
+                        ...filters,
+                        queryKey,
+                    }, options);
+                }, [queryClient]),
+                refetchQueries: useCallback((queryKey, filters, options) => {
+                    return queryClient.refetchQueries({
+                        ...filters,
+                        queryKey,
+                    }, options);
+                }, [queryClient]),
+                cancelQuery: useCallback((queryKey, options) => {
+                    return queryClient.cancelQueries({
+                        queryKey,
+                    }, options);
+                }, [queryClient]),
+                setQueryData: useCallback((queryKey, updater, options) => {
+                    return queryClient.setQueryData(queryKey, updater, options);
+                }, [queryClient]),
+                getQueryData: useCallback((queryKey) => {
+                    return queryClient.getQueryData(queryKey);
+                }, [queryClient]),
+                setInfiniteQueryData: useCallback((queryKey, updater, options) => {
+                    return queryClient.setQueryData(queryKey, updater, options);
+                }, [queryClient]),
+                getInfiniteQueryData: useCallback((queryKey) => {
+                    return queryClient.getQueryData(queryKey);
+                }, [queryClient]),
+            } }, props.children));
+    };
+    function useContext() {
+        const context = React.useContext(Context);
+        if (!context) {
+            throw new Error('Unable to find tRPC Context. Did you forget to wrap your App inside `withTRPC` HoC?');
+        }
+        return context;
+    }
+    /**
+     * Hack to make sure errors return `status`='error` when doing SSR
+     * @link https://github.com/trpc/trpc/pull/1645
+     */
+    function useSSRQueryOptionsIfNeeded(queryKey, opts) {
+        const { queryClient, ssrState } = useContext();
+        return ssrState &&
+            ssrState !== 'mounted' &&
+            queryClient.getQueryCache().find({ queryKey })?.state.status === 'error'
+            ? {
+                retryOnMount: false,
+                ...opts,
+            }
+            : opts;
+    }
+    function useQuery$1(path, input, opts) {
+        const context = useContext();
+        const { abortOnUnmount, client, ssrState, queryClient, prefetchQuery } = context;
+        const queryKey = getQueryKeyInternal(path, input, 'query');
+        const defaultOpts = queryClient.getQueryDefaults(queryKey);
+        if (typeof window === 'undefined' &&
+            ssrState === 'prepass' &&
+            opts?.trpc?.ssr !== false &&
+            (opts?.enabled ?? defaultOpts?.enabled) !== false &&
+            !queryClient.getQueryCache().find({ queryKey })) {
+            void prefetchQuery(queryKey, opts);
+        }
+        const ssrOpts = useSSRQueryOptionsIfNeeded(queryKey, {
+            ...defaultOpts,
+            ...opts,
+        });
+        const shouldAbortOnUnmount = opts?.trpc?.abortOnUnmount ?? config?.abortOnUnmount ?? abortOnUnmount;
+        const hook = useQuery({
+            ...ssrOpts,
+            queryKey: queryKey,
+            queryFn: (queryFunctionContext) => {
+                const actualOpts = {
+                    ...ssrOpts,
+                    trpc: {
+                        ...ssrOpts?.trpc,
+                        ...(shouldAbortOnUnmount
+                            ? { signal: queryFunctionContext.signal }
+                            : {}),
+                    },
+                };
+                return client.query(...getClientArgs(queryKey, actualOpts));
+            },
+        }, queryClient);
+        hook.trpc = useHookResult({
+            path: path.join('.'),
+        });
+        return hook;
+    }
+    function useSuspenseQuery$1(path, input, opts) {
+        const context = useContext();
+        const queryKey = getQueryKeyInternal(path, input, 'query');
+        const shouldAbortOnUnmount = opts?.trpc?.abortOnUnmount ??
+            config?.abortOnUnmount ??
+            context.abortOnUnmount;
+        const hook = useSuspenseQuery({
+            ...opts,
+            queryKey: queryKey,
+            queryFn: (queryFunctionContext) => {
+                const actualOpts = {
+                    trpc: {
+                        ...(shouldAbortOnUnmount
+                            ? { signal: queryFunctionContext.signal }
+                            : {}),
+                    },
+                };
+                return context.client.query(...getClientArgs(queryKey, actualOpts));
+            },
+        }, context.queryClient);
+        hook.trpc = useHookResult({
+            path: path.join('.'),
+        });
+        return [hook.data, hook];
+    }
+    function useMutation$1(path, opts) {
+        const { client } = useContext();
+        const queryClient = useQueryClient();
+        const mutationKey = [path];
+        const defaultOpts = queryClient.getMutationDefaults(mutationKey);
+        const hook = useMutation({
+            ...opts,
+            mutationKey: mutationKey,
+            mutationFn: (input) => {
+                return client.mutation(...getClientArgs([path, { input }], opts));
+            },
+            onSuccess(...args) {
+                const originalFn = () => opts?.onSuccess?.(...args) ?? defaultOpts?.onSuccess?.(...args);
+                return mutationSuccessOverride({
+                    originalFn,
+                    queryClient,
+                    meta: opts?.meta ?? defaultOpts?.meta ?? {},
+                });
+            },
+        }, queryClient);
+        hook.trpc = useHookResult({
+            path: path.join('.'),
+        });
+        return hook;
+    }
+    /* istanbul ignore next -- @preserve */
+    function useSubscription(path, input, opts) {
+        const enabled = opts?.enabled ?? true;
+        const queryKey = hashKey(getQueryKeyInternal(path, input, 'any'));
+        const { client } = useContext();
+        const optsRef = useRef(opts);
+        optsRef.current = opts;
+        useEffect(() => {
+            if (!enabled) {
+                return;
+            }
+            let isStopped = false;
+            const subscription = client.subscription(path.join('.'), input ?? undefined, {
+                onStarted: () => {
+                    if (!isStopped) {
+                        optsRef.current.onStarted?.();
+                    }
+                },
+                onData: (data) => {
+                    if (!isStopped) {
+                        opts.onData(data);
+                    }
+                },
+                onError: (err) => {
+                    if (!isStopped) {
+                        optsRef.current.onError?.(err);
+                    }
+                },
+            });
+            return () => {
+                isStopped = true;
+                subscription.unsubscribe();
+            };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [queryKey, enabled]);
+    }
+    function useInfiniteQuery$1(path, input, opts) {
+        const { client, ssrState, prefetchInfiniteQuery, queryClient, abortOnUnmount, } = useContext();
+        const queryKey = getQueryKeyInternal(path, input, 'infinite');
+        const defaultOpts = queryClient.getQueryDefaults(queryKey);
+        if (typeof window === 'undefined' &&
+            ssrState === 'prepass' &&
+            opts?.trpc?.ssr !== false &&
+            (opts?.enabled ?? defaultOpts?.enabled) !== false &&
+            !queryClient.getQueryCache().find({ queryKey })) {
+            void prefetchInfiniteQuery(queryKey, { ...defaultOpts, ...opts });
+        }
+        const ssrOpts = useSSRQueryOptionsIfNeeded(queryKey, {
+            ...defaultOpts,
+            ...opts,
+        });
+        // request option should take priority over global
+        const shouldAbortOnUnmount = opts?.trpc?.abortOnUnmount ?? abortOnUnmount;
+        const hook = useInfiniteQuery({
+            ...ssrOpts,
+            initialPageParam: opts.initialCursor ?? null,
+            persister: opts.persister,
+            queryKey: queryKey,
+            queryFn: (queryFunctionContext) => {
+                const actualOpts = {
+                    ...ssrOpts,
+                    trpc: {
+                        ...ssrOpts?.trpc,
+                        ...(shouldAbortOnUnmount
+                            ? { signal: queryFunctionContext.signal }
+                            : {}),
+                    },
+                };
+                return client.query(...getClientArgs(queryKey, actualOpts, queryFunctionContext.pageParam ?? opts.initialCursor));
+            },
+        }, queryClient);
+        hook.trpc = useHookResult({
+            path: path.join('.'),
+        });
+        return hook;
+    }
+    function useSuspenseInfiniteQuery$1(path, input, opts) {
+        const context = useContext();
+        const queryKey = getQueryKeyInternal(path, input, 'infinite');
+        const defaultOpts = context.queryClient.getQueryDefaults(queryKey);
+        const ssrOpts = useSSRQueryOptionsIfNeeded(queryKey, {
+            ...defaultOpts,
+            ...opts,
+        });
+        // request option should take priority over global
+        const shouldAbortOnUnmount = opts?.trpc?.abortOnUnmount ?? context.abortOnUnmount;
+        const hook = useSuspenseInfiniteQuery({
+            ...opts,
+            initialPageParam: opts.initialCursor ?? null,
+            queryKey,
+            queryFn: (queryFunctionContext) => {
+                const actualOpts = {
+                    ...ssrOpts,
+                    trpc: {
+                        ...ssrOpts?.trpc,
+                        ...(shouldAbortOnUnmount
+                            ? { signal: queryFunctionContext.signal }
+                            : {}),
+                    },
+                };
+                return context.client.query(...getClientArgs(queryKey, actualOpts, queryFunctionContext.pageParam ?? opts.initialCursor));
+            },
+        }, context.queryClient);
+        hook.trpc = useHookResult({
+            path: path.join('.'),
+        });
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        return [hook.data, hook];
+    }
+    const useQueries$1 = (queriesCallback) => {
+        const { ssrState, queryClient, prefetchQuery, client } = useContext();
+        const proxy = createUseQueries(client);
+        const queries = queriesCallback(proxy);
+        if (typeof window === 'undefined' && ssrState === 'prepass') {
+            for (const query of queries) {
+                const queryOption = query;
+                if (queryOption.trpc?.ssr !== false &&
+                    !queryClient.getQueryCache().find({ queryKey: queryOption.queryKey })) {
+                    void prefetchQuery(queryOption.queryKey, queryOption);
+                }
+            }
+        }
+        return useQueries({
+            queries: queries.map((query) => ({
+                ...query,
+                queryKey: query.queryKey,
+            })),
+        }, queryClient);
+    };
+    const useDehydratedState = (client, trpcState) => {
+        const transformed = useMemo(() => {
+            if (!trpcState) {
+                return trpcState;
+            }
+            return client.runtime.transformer.deserialize(trpcState);
+        }, [trpcState, client]);
+        return transformed;
+    };
+    return {
+        Provider: TRPCProvider,
+        createClient,
+        useContext,
+        useUtils: useContext,
+        useQuery: useQuery$1,
+        useSuspenseQuery: useSuspenseQuery$1,
+        useQueries: useQueries$1,
+        useMutation: useMutation$1,
+        useSubscription,
+        useDehydratedState,
+        useInfiniteQuery: useInfiniteQuery$1,
+        useSuspenseInfiniteQuery: useSuspenseInfiniteQuery$1,
+    };
+}
+
+export { createReactDecoration as a, createUseQueries as b, createRootHooks as c, getClientArgs as g };