@trpc/react-query 11.0.0-alpha-tmp-app-router-example.388 → 11.0.0-alpha-tmp-issues-5851-take-two.451

package/src/server/ssgProxy.ts

@@ -193,60 +193,59 @@ export function createServerSideHelpers<TRouter extends AnyRouter>(
       TRouter['_def']['record']
     >
   >;
+  const proxy = createRecursiveProxy<CreateSSGHelpers>((opts) => {
+    const args = opts.args;
+    const input = args[0];
+    const arrayPath = [...opts.path];
+    const utilName = arrayPath.pop() as keyof AnyDecoratedProcedure;
+
+    const queryFn = () =>
+      resolvedOpts.query({ path: arrayPath.join('.'), input });
+
+    const queryKey = getQueryKeyInternal(
+      arrayPath,
+      input,
+      getQueryType(utilName),
+    );
+
+    const helperMap: Record<keyof AnyDecoratedProcedure, () => unknown> = {
+      fetch: () => {
+        const args1 = args[1] as Maybe<TRPCFetchQueryOptions<any, any>>;
+        return queryClient.fetchQuery({ ...args1, queryKey, queryFn });
+      },
+      fetchInfinite: () => {
+        const args1 = args[1] as Maybe<
+          TRPCFetchInfiniteQueryOptions<any, any, any>
+        >;
+        return queryClient.fetchInfiniteQuery({
+          ...args1,
+          queryKey,
+          queryFn,
+          initialPageParam: args1?.initialCursor ?? null,
+        });
+      },
+      prefetch: () => {
+        const args1 = args[1] as Maybe<TRPCFetchQueryOptions<any, any>>;
+        return queryClient.prefetchQuery({ ...args1, queryKey, queryFn });
+      },
+      prefetchInfinite: () => {
+        const args1 = args[1] as Maybe<
+          TRPCFetchInfiniteQueryOptions<any, any, any>
+        >;
+        return queryClient.prefetchInfiniteQuery({
+          ...args1,
+          queryKey,
+          queryFn,
+          initialPageParam: args1?.initialCursor ?? null,
+        });
+      },
+    };
 
+    return helperMap[utilName]();
+  });
   return createFlatProxy<CreateSSGHelpers>((key) => {
     if (key === 'queryClient') return queryClient;
     if (key === 'dehydrate') return _dehydrate;
-
-    return createRecursiveProxy((opts) => {
-      const args = opts.args;
-      const input = args[0];
-      const arrayPath = [key, ...opts.path];
-      const utilName = arrayPath.pop() as keyof AnyDecoratedProcedure;
-
-      const queryFn = () =>
-        resolvedOpts.query({ path: arrayPath.join('.'), input });
-
-      const queryKey = getQueryKeyInternal(
-        arrayPath,
-        input,
-        getQueryType(utilName),
-      );
-
-      const helperMap: Record<keyof AnyDecoratedProcedure, () => unknown> = {
-        fetch: () => {
-          const args1 = args[1] as Maybe<TRPCFetchQueryOptions<any, any>>;
-          return queryClient.fetchQuery({ ...args1, queryKey, queryFn });
-        },
-        fetchInfinite: () => {
-          const args1 = args[1] as Maybe<
-            TRPCFetchInfiniteQueryOptions<any, any, any>
-          >;
-          return queryClient.fetchInfiniteQuery({
-            ...args1,
-            queryKey,
-            queryFn,
-            initialPageParam: args1?.initialCursor ?? null,
-          });
-        },
-        prefetch: () => {
-          const args1 = args[1] as Maybe<TRPCFetchQueryOptions<any, any>>;
-          return queryClient.prefetchQuery({ ...args1, queryKey, queryFn });
-        },
-        prefetchInfinite: () => {
-          const args1 = args[1] as Maybe<
-            TRPCFetchInfiniteQueryOptions<any, any, any>
-          >;
-          return queryClient.prefetchInfiniteQuery({
-            ...args1,
-            queryKey,
-            queryFn,
-            initialPageParam: args1?.initialCursor ?? null,
-          });
-        },
-      };
-
-      return helperMap[utilName]();
-    });
+    return proxy[key];
   });
 }

package/src/shared/hooks/createHooksInternal.tsx

@@ -134,7 +134,7 @@ export function createRootHooks<
   }
 
   function useQuery(
-    path: string[],
+    path: readonly string[],
     input: unknown,
     opts?: UseTRPCQueryOptions<unknown, unknown, TError>,
   ): UseTRPCQueryResult<unknown, TError> {
@@ -222,7 +222,7 @@ export function createRootHooks<
   }
 
   function useSuspenseQuery(
-    path: string[],
+    path: readonly string[],
     input: unknown,
     opts?: UseTRPCSuspenseQueryOptions<unknown, unknown, TError>,
   ): UseTRPCSuspenseQueryResult<unknown, TError> {
@@ -261,7 +261,7 @@ export function createRootHooks<
   }
 
   function useMutation(
-    path: string[],
+    path: readonly string[],
     opts?: UseTRPCMutationOptions<unknown, TError, unknown, unknown>,
   ): UseTRPCMutationResult<unknown, TError, unknown, unknown> {
     const { client } = useContext();
@@ -303,11 +303,11 @@ export function createRootHooks<
 
   /* istanbul ignore next -- @preserve */
   function useSubscription(
-    path: string[],
+    path: readonly string[],
     input: unknown,
     opts: UseTRPCSubscriptionOptions<unknown, TError>,
   ) {
-    const enabled = opts?.enabled ?? true;
+    const enabled = opts?.enabled ?? input !== skipToken;
     const queryKey = hashKey(getQueryKeyInternal(path, input, 'any'));
     const { client } = useContext();
 
@@ -349,7 +349,7 @@ export function createRootHooks<
   }
 
   function useInfiniteQuery(
-    path: string[],
+    path: readonly string[],
     input: unknown,
     opts: UseTRPCInfiniteQueryOptions<unknown, unknown, TError>,
   ): UseTRPCInfiniteQueryResult<unknown, TError, unknown> {
@@ -423,7 +423,7 @@ export function createRootHooks<
   }
 
   function useSuspenseInfiniteQuery(
-    path: string[],
+    path: readonly string[],
     input: unknown,
     opts: UseTRPCSuspenseInfiniteQueryOptions<unknown, unknown, TError>,
   ): UseTRPCSuspenseInfiniteQueryResult<unknown, TError, unknown> {

package/src/shared/proxy/decorationProxy.ts

@@ -9,9 +9,9 @@ import type { CreateReactQueryHooks } from '../hooks/createHooksInternal';
 export function createReactDecoration<
   TRouter extends AnyRouter,
   TSSRContext = unknown,
->(name: string, hooks: CreateReactQueryHooks<TRouter, TSSRContext>) {
+>(hooks: CreateReactQueryHooks<TRouter, TSSRContext>) {
   return createRecursiveProxy(({ path, args }) => {
-    const pathCopy = [name, ...path];
+    const pathCopy = [...path];
 
     // The last arg is for instance `.useMutation` or `.useQuery()`
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion

package/src/shared/proxy/useQueriesProxy.ts

@@ -88,7 +88,12 @@ export type UseSuspenseQueriesProcedureRecord<
 export function createUseQueries<TRouter extends AnyRouter>(
   client: TRPCUntypedClient<TRouter>,
 ) {
-  return createRecursiveProxy((opts) => {
+  return createRecursiveProxy<
+    UseQueriesProcedureRecord<
+      TRouter['_def']['_config']['$types'],
+      TRouter['_def']['record']
+    >
+  >((opts) => {
     const arrayPath = opts.path;
     const dotPath = arrayPath.join('.');
     const [input, _opts] = opts.args as [
@@ -105,8 +110,5 @@ export function createUseQueries<TRouter extends AnyRouter>(
     };
 
     return options;
-  }) as UseQueriesProcedureRecord<
-    TRouter['_def']['_config']['$types'],
-    TRouter['_def']['record']
-  >;
+  });
 }

package/src/shared/proxy/utilsProxy.ts

@@ -309,10 +309,9 @@ export const getQueryType = (
  */
 function createRecursiveUtilsProxy<TRouter extends AnyRouter>(
   context: TRPCQueryUtils<TRouter>,
-  key: string,
 ) {
-  return createRecursiveProxy((opts) => {
-    const path = [key, ...opts.path];
+  return createRecursiveProxy<CreateQueryUtils<TRouter>>((opts) => {
+    const path = [...opts.path];
     const utilName = path.pop() as keyof AnyDecoratedProcedure;
     const args = [...opts.args] as Parameters<
       AnyDecoratedProcedure[typeof utilName]
@@ -355,16 +354,22 @@ export function createReactQueryUtils<TRouter extends AnyRouter, TSSRContext>(
 ) {
   type CreateReactUtilsReturnType = CreateReactUtils<TRouter, TSSRContext>;
 
+  const clientProxy = createTRPCClientProxy(context.client);
+
+  const proxy = createRecursiveUtilsProxy(
+    context,
+  ) as CreateReactUtilsReturnType;
+
   return createFlatProxy<CreateReactUtilsReturnType>((key) => {
     const contextName = key as (typeof contextProps)[number];
     if (contextName === 'client') {
-      return createTRPCClientProxy(context.client);
+      return clientProxy;
     }
     if (contextProps.includes(contextName)) {
       return context[contextName];
     }
 
-    return createRecursiveUtilsProxy(context, key);
+    return proxy[key];
   });
 }
 
@@ -374,7 +379,5 @@ export function createReactQueryUtils<TRouter extends AnyRouter, TSSRContext>(
 export function createQueryUtilsProxy<TRouter extends AnyRouter>(
   context: TRPCQueryUtils<TRouter>,
 ): CreateQueryUtils<TRouter> {
-  return createFlatProxy((key) => {
-    return createRecursiveUtilsProxy(context, key);
-  });
+  return createRecursiveUtilsProxy(context);
 }