@trpc/react-query 11.0.0-next.92 → 11.0.0-rc.330

package/dist/{createHooksInternal-e2034194.js → shared/hooks/createHooksInternal.js}

@@ -1,214 +1,78 @@
 'use strict';
 
-var shared = require('@trpc/server/shared');
 var reactQuery = require('@tanstack/react-query');
 var client = require('@trpc/client');
 var React = require('react');
-var utilsProxy = require('./utilsProxy-27bd93c1.js');
+var context = require('../../internals/context.js');
+var getClientArgs = require('../../internals/getClientArgs.js');
+var getQueryKey = require('../../internals/getQueryKey.js');
+var useHookResult = require('../../internals/useHookResult.js');
+var createUtilityFunctions = require('../../utils/createUtilityFunctions.js');
+var useQueriesProxy = require('../proxy/useQueriesProxy.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-/**
- * Create proxy for decorating procedures
- * @internal
- */ function createReactDecoration(name, hooks) {
-    return shared.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 shared.createRecursiveProxy((opts)=>{
-        const arrayPath = opts.path;
-        const dotPath = arrayPath.join('.');
-        const [input, _opts] = opts.args;
-        const options = {
-            queryKey: utilsProxy.getQueryKeyInternal(arrayPath, input, 'query'),
-            queryFn: ()=>{
-                return client.query(dotPath, input, _opts?.trpc);
-            },
-            ..._opts
-        };
-        return options;
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
     });
+  }
+  n.default = e;
+  return Object.freeze(n);
 }
 
-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 = React.useRef(value);
-    ref.current.path = value.path;
-    return ref.current;
-}
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
 /**
  * @internal
  */ function createRootHooks(config) {
     const mutationSuccessOverride = config?.overrides?.useMutation?.onSuccess ?? ((options)=>options.originalFn());
-    const Context = config?.context ?? utilsProxy.TRPCContext;
+    const Context = config?.context ?? context.TRPCContext;
     const createClient = (opts)=>{
         return client.createTRPCUntypedClient(opts);
     };
     const TRPCProvider = (props)=>{
         const { abortOnUnmount =false , client , queryClient , ssrContext  } = props;
-        const [ssrState, setSSRState] = React.useState(props.ssrState ?? false);
-        React.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 /*#__PURE__*/ React__default["default"].createElement(Context.Provider, {
-            value: {
+        const [ssrState, setSSRState] = React__namespace.useState(props.ssrState ?? false);
+        const fns = React__namespace.useMemo(()=>createUtilityFunctions.createUtilityFunctions({
+                client,
+                queryClient
+            }), [
+            client,
+            queryClient
+        ]);
+        const contextValue = React__namespace.useMemo(()=>({
                 abortOnUnmount,
                 queryClient,
                 client,
                 ssrContext: ssrContext ?? null,
                 ssrState,
-                fetchQuery: React.useCallback((queryKey, opts)=>{
-                    return queryClient.fetchQuery({
-                        ...opts,
-                        queryKey,
-                        queryFn: ()=>client.query(...getClientArgs(queryKey, opts))
-                    });
-                }, [
-                    client,
-                    queryClient
-                ]),
-                fetchInfiniteQuery: React.useCallback((queryKey, opts)=>{
-                    return queryClient.fetchInfiniteQuery({
-                        ...opts,
-                        queryKey,
-                        queryFn: ({ pageParam  })=>{
-                            return client.query(...getClientArgs(queryKey, opts, pageParam));
-                        },
-                        initialPageParam: opts?.initialCursor ?? null
-                    });
-                }, [
-                    client,
-                    queryClient
-                ]),
-                prefetchQuery: React.useCallback((queryKey, opts)=>{
-                    return queryClient.prefetchQuery({
-                        ...opts,
-                        queryKey,
-                        queryFn: ()=>client.query(...getClientArgs(queryKey, opts))
-                    });
-                }, [
-                    client,
-                    queryClient
-                ]),
-                prefetchInfiniteQuery: React.useCallback((queryKey, opts)=>{
-                    return queryClient.prefetchInfiniteQuery({
-                        ...opts,
-                        queryKey,
-                        queryFn: ({ pageParam  })=>{
-                            return client.query(...getClientArgs(queryKey, opts, pageParam));
-                        },
-                        initialPageParam: opts?.initialCursor ?? null
-                    });
-                }, [
-                    client,
-                    queryClient
-                ]),
-                ensureQueryData: React.useCallback((queryKey, opts)=>{
-                    return queryClient.ensureQueryData({
-                        ...opts,
-                        queryKey,
-                        queryFn: ()=>client.query(...getClientArgs(queryKey, opts))
-                    });
-                }, [
-                    client,
-                    queryClient
-                ]),
-                invalidateQueries: React.useCallback((queryKey, filters, options)=>{
-                    return queryClient.invalidateQueries({
-                        ...filters,
-                        queryKey
-                    }, options);
-                }, [
-                    queryClient
-                ]),
-                resetQueries: React.useCallback((queryKey, filters, options)=>{
-                    return queryClient.resetQueries({
-                        ...filters,
-                        queryKey
-                    }, options);
-                }, [
-                    queryClient
-                ]),
-                refetchQueries: React.useCallback((queryKey, filters, options)=>{
-                    return queryClient.refetchQueries({
-                        ...filters,
-                        queryKey
-                    }, options);
-                }, [
-                    queryClient
-                ]),
-                cancelQuery: React.useCallback((queryKey, options)=>{
-                    return queryClient.cancelQueries({
-                        queryKey
-                    }, options);
-                }, [
-                    queryClient
-                ]),
-                setQueryData: React.useCallback((queryKey, updater, options)=>{
-                    return queryClient.setQueryData(queryKey, updater, options);
-                }, [
-                    queryClient
-                ]),
-                getQueryData: React.useCallback((queryKey)=>{
-                    return queryClient.getQueryData(queryKey);
-                }, [
-                    queryClient
-                ]),
-                setInfiniteQueryData: React.useCallback((queryKey, updater, options)=>{
-                    return queryClient.setQueryData(queryKey, updater, options);
-                }, [
-                    queryClient
-                ]),
-                getInfiniteQueryData: React.useCallback((queryKey)=>{
-                    return queryClient.getQueryData(queryKey);
-                }, [
-                    queryClient
-                ])
-            }
+                ...fns
+            }), [
+            abortOnUnmount,
+            client,
+            fns,
+            queryClient,
+            ssrContext,
+            ssrState
+        ]);
+        React__namespace.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 /*#__PURE__*/ React__namespace.createElement(Context.Provider, {
+            value: contextValue
         }, props.children);
     };
     function useContext() {
-        const context = React__default["default"].useContext(Context);
+        const context = React__namespace.useContext(Context);
         if (!context) {
             throw new Error('Unable to find tRPC Context. Did you forget to wrap your App inside `withTRPC` HoC?');
         }
@@ -229,9 +93,10 @@ function getClientArgs(queryKey, opts, pageParam) {
     function useQuery(path, input, opts) {
         const context = useContext();
         const { abortOnUnmount , client , ssrState , queryClient , prefetchQuery  } = context;
-        const queryKey = utilsProxy.getQueryKeyInternal(path, input, 'query');
+        const queryKey = getQueryKey.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({
+        const isInputSkipToken = input === reactQuery.skipToken;
+        if (typeof window === 'undefined' && ssrState === 'prepass' && opts?.trpc?.ssr !== false && (opts?.enabled ?? defaultOpts?.enabled) !== false && !isInputSkipToken && !queryClient.getQueryCache().find({
             queryKey
         })) {
             void prefetchQuery(queryKey, opts);
@@ -244,7 +109,7 @@ function getClientArgs(queryKey, opts, pageParam) {
         const hook = reactQuery.useQuery({
             ...ssrOpts,
             queryKey: queryKey,
-            queryFn: (queryFunctionContext)=>{
+            queryFn: isInputSkipToken ? input : (queryFunctionContext)=>{
                 const actualOpts = {
                     ...ssrOpts,
                     trpc: {
@@ -254,17 +119,17 @@ function getClientArgs(queryKey, opts, pageParam) {
                         } : {}
                     }
                 };
-                return client.query(...getClientArgs(queryKey, actualOpts));
+                return client.query(...getClientArgs.getClientArgs(queryKey, actualOpts));
             }
         }, queryClient);
-        hook.trpc = useHookResult({
-            path: path.join('.')
+        hook.trpc = useHookResult.useHookResult({
+            path
         });
         return hook;
     }
     function useSuspenseQuery(path, input, opts) {
         const context = useContext();
-        const queryKey = utilsProxy.getQueryKeyInternal(path, input, 'query');
+        const queryKey = getQueryKey.getQueryKeyInternal(path, input, 'query');
         const shouldAbortOnUnmount = opts?.trpc?.abortOnUnmount ?? config?.abortOnUnmount ?? context.abortOnUnmount;
         const hook = reactQuery.useSuspenseQuery({
             ...opts,
@@ -277,11 +142,11 @@ function getClientArgs(queryKey, opts, pageParam) {
                         } : {}
                     }
                 };
-                return context.client.query(...getClientArgs(queryKey, actualOpts));
+                return context.client.query(...getClientArgs.getClientArgs(queryKey, actualOpts));
             }
         }, context.queryClient);
-        hook.trpc = useHookResult({
-            path: path.join('.')
+        hook.trpc = useHookResult.useHookResult({
+            path
         });
         return [
             hook.data,
@@ -299,7 +164,7 @@ function getClientArgs(queryKey, opts, pageParam) {
             ...opts,
             mutationKey: mutationKey,
             mutationFn: (input)=>{
-                return client.mutation(...getClientArgs([
+                return client.mutation(...getClientArgs.getClientArgs([
                     path,
                     {
                         input
@@ -315,18 +180,18 @@ function getClientArgs(queryKey, opts, pageParam) {
                 });
             }
         }, queryClient);
-        hook.trpc = useHookResult({
-            path: path.join('.')
+        hook.trpc = useHookResult.useHookResult({
+            path
         });
         return hook;
     }
     /* istanbul ignore next -- @preserve */ function useSubscription(path, input, opts) {
         const enabled = opts?.enabled ?? true;
-        const queryKey = reactQuery.hashKey(utilsProxy.getQueryKeyInternal(path, input, 'any'));
+        const queryKey = reactQuery.hashKey(getQueryKey.getQueryKeyInternal(path, input, 'any'));
         const { client  } = useContext();
-        const optsRef = React.useRef(opts);
+        const optsRef = React__namespace.useRef(opts);
         optsRef.current = opts;
-        React.useEffect(()=>{
+        React__namespace.useEffect(()=>{
             if (!enabled) {
                 return;
             }
@@ -360,9 +225,10 @@ function getClientArgs(queryKey, opts, pageParam) {
     }
     function useInfiniteQuery(path, input, opts) {
         const { client , ssrState , prefetchInfiniteQuery , queryClient , abortOnUnmount ,  } = useContext();
-        const queryKey = utilsProxy.getQueryKeyInternal(path, input, 'infinite');
+        const queryKey = getQueryKey.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({
+        const isInputSkipToken = input === reactQuery.skipToken;
+        if (typeof window === 'undefined' && ssrState === 'prepass' && opts?.trpc?.ssr !== false && (opts?.enabled ?? defaultOpts?.enabled) !== false && !isInputSkipToken && !queryClient.getQueryCache().find({
             queryKey
         })) {
             void prefetchInfiniteQuery(queryKey, {
@@ -381,7 +247,7 @@ function getClientArgs(queryKey, opts, pageParam) {
             initialPageParam: opts.initialCursor ?? null,
             persister: opts.persister,
             queryKey: queryKey,
-            queryFn: (queryFunctionContext)=>{
+            queryFn: isInputSkipToken ? input : (queryFunctionContext)=>{
                 const actualOpts = {
                     ...ssrOpts,
                     trpc: {
@@ -391,17 +257,20 @@ function getClientArgs(queryKey, opts, pageParam) {
                         } : {}
                     }
                 };
-                return client.query(...getClientArgs(queryKey, actualOpts, queryFunctionContext.pageParam ?? opts.initialCursor));
+                return client.query(...getClientArgs.getClientArgs(queryKey, actualOpts, {
+                    pageParam: queryFunctionContext.pageParam ?? opts.initialCursor,
+                    direction: queryFunctionContext.direction
+                }));
             }
         }, queryClient);
-        hook.trpc = useHookResult({
-            path: path.join('.')
+        hook.trpc = useHookResult.useHookResult({
+            path
         });
         return hook;
     }
     function useSuspenseInfiniteQuery(path, input, opts) {
         const context = useContext();
-        const queryKey = utilsProxy.getQueryKeyInternal(path, input, 'infinite');
+        const queryKey = getQueryKey.getQueryKeyInternal(path, input, 'infinite');
         const defaultOpts = context.queryClient.getQueryDefaults(queryKey);
         const ssrOpts = useSSRQueryOptionsIfNeeded(queryKey, {
             ...defaultOpts,
@@ -423,11 +292,14 @@ function getClientArgs(queryKey, opts, pageParam) {
                         } : {}
                     }
                 };
-                return context.client.query(...getClientArgs(queryKey, actualOpts, queryFunctionContext.pageParam ?? opts.initialCursor));
+                return context.client.query(...getClientArgs.getClientArgs(queryKey, actualOpts, {
+                    pageParam: queryFunctionContext.pageParam ?? opts.initialCursor,
+                    direction: queryFunctionContext.direction
+                }));
             }
         }, context.queryClient);
-        hook.trpc = useHookResult({
-            path: path.join('.')
+        hook.trpc = useHookResult.useHookResult({
+            path
         });
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         return [
@@ -437,7 +309,7 @@ function getClientArgs(queryKey, opts, pageParam) {
     }
     const useQueries = (queriesCallback)=>{
         const { ssrState , queryClient , prefetchQuery , client  } = useContext();
-        const proxy = createUseQueries(client);
+        const proxy = useQueriesProxy.createUseQueries(client);
         const queries = queriesCallback(proxy);
         if (typeof window === 'undefined' && ssrState === 'prepass') {
             for (const query of queries){
@@ -456,17 +328,20 @@ function getClientArgs(queryKey, opts, pageParam) {
                 }))
         }, queryClient);
     };
-    const useDehydratedState = (client, trpcState)=>{
-        const transformed = React.useMemo(()=>{
-            if (!trpcState) {
-                return trpcState;
-            }
-            return client.runtime.transformer.deserialize(trpcState);
-        }, [
-            trpcState,
-            client
-        ]);
-        return transformed;
+    const useSuspenseQueries = (queriesCallback)=>{
+        const { queryClient , client  } = useContext();
+        const proxy = useQueriesProxy.createUseQueries(client);
+        const queries = queriesCallback(proxy);
+        const hook = reactQuery.useSuspenseQueries({
+            queries: queries.map((query)=>({
+                    ...query,
+                    queryKey: query.queryKey
+                }))
+        }, queryClient);
+        return [
+            hook.map((h)=>h.data),
+            hook
+        ];
     };
     return {
         Provider: TRPCProvider,
@@ -476,15 +351,12 @@ function getClientArgs(queryKey, opts, pageParam) {
         useQuery,
         useSuspenseQuery,
         useQueries,
+        useSuspenseQueries,
         useMutation,
         useSubscription,
-        useDehydratedState,
         useInfiniteQuery,
         useSuspenseInfiniteQuery
     };
 }
 
-exports.createReactDecoration = createReactDecoration;
 exports.createRootHooks = createRootHooks;
-exports.createUseQueries = createUseQueries;
-exports.getClientArgs = getClientArgs;