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

package/src/createTRPCReact.tsx

@@ -1,9 +1,9 @@
-import { InfiniteData } from '@tanstack/react-query';
 import { TRPCClientErrorLike } from '@trpc/client';
 import {
   AnyMutationProcedure,
   AnyProcedure,
   AnyQueryProcedure,
+  AnyRootConfig,
   AnyRouter,
   AnySubscriptionProcedure,
   inferProcedureInput,
@@ -16,17 +16,16 @@ import {
   inferTransformedSubscriptionOutput,
 } from '@trpc/server/shared';
 import { useMemo } from 'react';
-import { QueryKey, QueryType } from './internals/getArrayQueryKey';
 import { TRPCUseQueries } from './internals/useQueries';
 import {
-  createReactProxyDecoration,
-  createReactQueryUtilsProxy,
-  CreateReactUtilsProxy,
+  createReactDecoration,
+  createReactQueryUtils,
+  CreateReactUtils,
 } from './shared';
 import {
-  createHooksInternal,
   CreateReactQueryHooks,
-} from './shared/hooks/createRootHooks';
+  createRootHooks,
+} from './shared/hooks/createHooksInternal';
 import {
   CreateClient,
   DefinedUseTRPCQueryOptions,
@@ -35,13 +34,15 @@ import {
   UseDehydratedState,
   UseTRPCInfiniteQueryOptions,
   UseTRPCInfiniteQueryResult,
-  UseTRPCInfiniteQuerySuccessResult,
   UseTRPCMutationOptions,
   UseTRPCMutationResult,
   UseTRPCQueryOptions,
   UseTRPCQueryResult,
-  UseTRPCQuerySuccessResult,
   UseTRPCSubscriptionOptions,
+  UseTRPCSuspenseInfiniteQueryOptions,
+  UseTRPCSuspenseInfiniteQueryResult,
+  UseTRPCSuspenseQueryOptions,
+  UseTRPCSuspenseQueryResult,
 } from './shared/hooks/types';
 import { CreateTRPCReactOptions } from './shared/types';
 
@@ -49,144 +50,165 @@ import { CreateTRPCReactOptions } from './shared/types';
  * @internal
  */
 export interface ProcedureUseQuery<
+  TConfig extends AnyRootConfig,
   TProcedure extends AnyProcedure,
-  TPath extends string,
 > {
   <
-    TQueryFnData extends inferTransformedProcedureOutput<TProcedure> = inferTransformedProcedureOutput<TProcedure>,
+    TQueryFnData extends inferTransformedProcedureOutput<
+      TConfig,
+      TProcedure
+    > = inferTransformedProcedureOutput<TConfig, TProcedure>,
     TData = TQueryFnData,
   >(
     input: inferProcedureInput<TProcedure>,
     opts: DefinedUseTRPCQueryOptions<
-      TPath,
-      inferProcedureInput<TProcedure>,
       TQueryFnData,
       TData,
-      TRPCClientErrorLike<TProcedure>,
-      inferTransformedProcedureOutput<TProcedure>
+      TRPCClientErrorLike<TConfig>,
+      inferTransformedProcedureOutput<TConfig, TProcedure>
     >,
-  ): DefinedUseTRPCQueryResult<TData, TRPCClientErrorLike<TProcedure>>;
+  ): DefinedUseTRPCQueryResult<TData, TRPCClientErrorLike<TConfig>>;
 
   <
-    TQueryFnData extends inferTransformedProcedureOutput<TProcedure> = inferTransformedProcedureOutput<TProcedure>,
+    TQueryFnData extends inferTransformedProcedureOutput<
+      TConfig,
+      TProcedure
+    > = inferTransformedProcedureOutput<TConfig, TProcedure>,
     TData = TQueryFnData,
   >(
     input: inferProcedureInput<TProcedure>,
     opts?: UseTRPCQueryOptions<
-      TPath,
-      inferProcedureInput<TProcedure>,
       TQueryFnData,
       TData,
-      TRPCClientErrorLike<TProcedure>,
-      inferTransformedProcedureOutput<TProcedure>
+      TRPCClientErrorLike<TConfig>,
+      inferTransformedProcedureOutput<TConfig, TProcedure>
     >,
-  ): UseTRPCQueryResult<TData, TRPCClientErrorLike<TProcedure>>;
+  ): UseTRPCQueryResult<TData, TRPCClientErrorLike<TConfig>>;
 }
 
+/**
+ * @remark `void` is here due to https://github.com/trpc/trpc/pull/4374
+ */
+type CursorInput = {
+  cursor?: any;
+} | void;
+
 /**
  * @internal
  */
-export type DecorateProcedure<
+export type MaybeDecoratedInfiniteQuery<
   TProcedure extends AnyProcedure,
-  _TFlags,
-  TPath extends string,
-> = TProcedure extends AnyQueryProcedure
-  ? (inferProcedureInput<TProcedure> extends { cursor?: any } | void
-      ? {
-          /**
-           * @see https://trpc.io/docs/client/react/suspense#useinfinitesuspensequery
-           */
-          useInfiniteQuery: (
-            input: Omit<inferProcedureInput<TProcedure>, 'cursor'>,
-            opts?: UseTRPCInfiniteQueryOptions<
-              TPath,
-              inferProcedureInput<TProcedure>,
-              inferTransformedProcedureOutput<TProcedure>,
-              TRPCClientErrorLike<TProcedure>
-            >,
-          ) => UseTRPCInfiniteQueryResult<
-            inferTransformedProcedureOutput<TProcedure>,
-            TRPCClientErrorLike<TProcedure>
-          >;
-          /**
-           * @see https://trpc.io/docs/client/react/suspense
-           */
-          useSuspenseInfiniteQuery: (
-            input: Omit<inferProcedureInput<TProcedure>, 'cursor'>,
-            opts?: Omit<
-              UseTRPCInfiniteQueryOptions<
-                TPath,
-                inferProcedureInput<TProcedure>,
-                inferTransformedProcedureOutput<TProcedure>,
-                TRPCClientErrorLike<TProcedure>
-              >,
-              'enabled' | 'suspense'
-            >,
-          ) => [
-            InfiniteData<inferTransformedProcedureOutput<TProcedure>>,
-            UseTRPCInfiniteQuerySuccessResult<
-              inferTransformedProcedureOutput<TProcedure>,
-              TRPCClientErrorLike<TProcedure>
-            >,
-          ];
-        }
-      : object) & {
-      /**
-       * Method to extract the query key for a procedure
-       * @param type - defaults to `any`
-       * @see https://trpc.io/docs/client/react/getQueryKey
-       * @deprecated - import `getQueryKey` from `@trpc/react-query` instead
-       */
-      getQueryKey: (
-        input: inferProcedureInput<TProcedure>,
-        type?: QueryType,
-      ) => QueryKey;
-      /**
-       * @see https://trpc.io/docs/client/react/useQuery
-       */
-      useQuery: ProcedureUseQuery<TProcedure, TPath>;
+  TConfig extends AnyRootConfig,
+> = inferProcedureInput<TProcedure> extends CursorInput
+  ? {
       /**
-       * @see https://trpc.io/docs/client/react/suspense#usesuspensequery
+       * @see https://trpc.io/docs/client/react/suspense#useinfinitesuspensequery
        */
-      useSuspenseQuery: <
-        TQueryFnData extends inferTransformedProcedureOutput<TProcedure> = inferTransformedProcedureOutput<TProcedure>,
-        TData = TQueryFnData,
-      >(
-        input: inferProcedureInput<TProcedure>,
-        opts?: Omit<
-          UseTRPCQueryOptions<
-            TPath,
-            inferProcedureInput<TProcedure>,
-            TQueryFnData,
-            TData,
-            TRPCClientErrorLike<TProcedure>
-          >,
-          'enabled' | 'suspense'
+      useInfiniteQuery: (
+        input: Omit<inferProcedureInput<TProcedure>, 'cursor'>,
+        opts: UseTRPCInfiniteQueryOptions<
+          inferProcedureInput<TProcedure>,
+          inferTransformedProcedureOutput<TConfig, TProcedure>,
+          TRPCClientErrorLike<TConfig>
         >,
-      ) => [
-        TData,
-        UseTRPCQuerySuccessResult<TData, TRPCClientErrorLike<TProcedure>>,
-      ];
-    }
-  : TProcedure extends AnyMutationProcedure
-  ? {
+      ) => UseTRPCInfiniteQueryResult<
+        inferTransformedProcedureOutput<TConfig, TProcedure>,
+        TRPCClientErrorLike<TConfig>,
+        inferProcedureInput<TProcedure>
+      >;
       /**
-       * @see https://trpc.io/docs/client/react/useMutation
+       * @see https://trpc.io/docs/client/react/suspense
        */
-      useMutation: <TContext = unknown>(
-        opts?: UseTRPCMutationOptions<
+      useSuspenseInfiniteQuery: (
+        input: Omit<inferProcedureInput<TProcedure>, 'cursor'>,
+        opts: UseTRPCSuspenseInfiniteQueryOptions<
           inferProcedureInput<TProcedure>,
-          TRPCClientErrorLike<TProcedure>,
-          inferTransformedProcedureOutput<TProcedure>,
-          TContext
+          inferTransformedProcedureOutput<TConfig, TProcedure>,
+          TRPCClientErrorLike<TConfig>
         >,
-      ) => UseTRPCMutationResult<
-        inferTransformedProcedureOutput<TProcedure>,
-        TRPCClientErrorLike<TProcedure>,
-        inferProcedureInput<TProcedure>,
-        TContext
+      ) => UseTRPCSuspenseInfiniteQueryResult<
+        inferTransformedProcedureOutput<TConfig, TProcedure>,
+        TRPCClientErrorLike<TConfig>,
+        inferProcedureInput<TProcedure>
       >;
     }
+  : object;
+
+/**
+ * @internal
+ */
+export type DecoratedQueryMethods<
+  TConfig extends AnyRootConfig,
+  TProcedure extends AnyProcedure,
+> = {
+  /**
+   * @see https://trpc.io/docs/client/react/useQuery
+   */
+  useQuery: ProcedureUseQuery<TConfig, TProcedure>;
+  /**
+   * @see https://trpc.io/docs/client/react/suspense#usesuspensequery
+   */
+  useSuspenseQuery: <
+    TQueryFnData extends inferTransformedProcedureOutput<
+      TConfig,
+      TProcedure
+    > = inferTransformedProcedureOutput<TConfig, TProcedure>,
+    TData = TQueryFnData,
+  >(
+    input: inferProcedureInput<TProcedure>,
+    opts?: UseTRPCSuspenseQueryOptions<
+      TQueryFnData,
+      TData,
+      TRPCClientErrorLike<TConfig>
+    >,
+  ) => UseTRPCSuspenseQueryResult<TData, TRPCClientErrorLike<TConfig>>;
+};
+
+/**
+ * @internal
+ */
+export type DecoratedQuery<
+  TConfig extends AnyRootConfig,
+  TProcedure extends AnyProcedure,
+> = MaybeDecoratedInfiniteQuery<TProcedure, TConfig> &
+  DecoratedQueryMethods<TConfig, TProcedure>;
+
+/**
+ * @internal
+ */
+export interface DecoratedMutation<
+  TConfig extends AnyRootConfig,
+  TProcedure extends AnyProcedure,
+> {
+  /**
+   * @see https://trpc.io/docs/client/react/useMutation
+   */
+  useMutation: <TContext = unknown>(
+    opts?: UseTRPCMutationOptions<
+      inferProcedureInput<TProcedure>,
+      TRPCClientErrorLike<TConfig>,
+      inferTransformedProcedureOutput<TConfig, TProcedure>,
+      TContext
+    >,
+  ) => UseTRPCMutationResult<
+    inferTransformedProcedureOutput<TConfig, TProcedure>,
+    TRPCClientErrorLike<TConfig>,
+    inferProcedureInput<TProcedure>,
+    TContext
+  >;
+}
+
+/**
+ * @internal
+ */
+export type DecorateProcedure<
+  TConfig extends AnyRootConfig,
+  TProcedure extends AnyProcedure,
+  _TFlags,
+> = TProcedure extends AnyQueryProcedure
+  ? DecoratedQuery<TConfig, TProcedure>
+  : TProcedure extends AnyMutationProcedure
+  ? DecoratedMutation<TConfig, TProcedure>
   : TProcedure extends AnySubscriptionProcedure
   ? {
       /**
@@ -195,8 +217,8 @@ export type DecorateProcedure<
       useSubscription: (
         input: inferProcedureInput<TProcedure>,
         opts?: UseTRPCSubscriptionOptions<
-          inferTransformedSubscriptionOutput<TProcedure>,
-          TRPCClientErrorLike<TProcedure>
+          inferTransformedSubscriptionOutput<TConfig, TProcedure>,
+          TRPCClientErrorLike<TConfig>
         >,
       ) => void;
     }
@@ -206,23 +228,18 @@ export type DecorateProcedure<
  * @internal
  */
 export type DecoratedProcedureRecord<
+  TConfig extends AnyRootConfig,
   TProcedures extends ProcedureRouterRecord,
   TFlags,
-  TPath extends string = '',
 > = {
   [TKey in keyof TProcedures]: TProcedures[TKey] extends AnyRouter
     ? DecoratedProcedureRecord<
+        TConfig,
         TProcedures[TKey]['_def']['record'],
-        TFlags,
-        `${TPath}${TKey & string}.`
-      > & {
-        /**
-         * @deprecated - import `getQueryKey` from `@trpc/react-query` instead
-         */
-        getQueryKey: () => QueryKey;
-      }
+        TFlags
+      >
     : TProcedures[TKey] extends AnyProcedure
-    ? DecorateProcedure<TProcedures[TKey], TFlags, `${TPath}${TKey & string}`>
+    ? DecorateProcedure<TConfig, TProcedures[TKey], TFlags>
     : never;
 };
 
@@ -235,11 +252,11 @@ export type CreateTRPCReactBase<TRouter extends AnyRouter, TSSRContext> = {
    *
    * @see https://trpc.io/docs/client/react/useUtils
    */
-  useContext(): CreateReactUtilsProxy<TRouter, TSSRContext>;
+  useContext(): CreateReactUtils<TRouter, TSSRContext>;
   /**
    * @see https://trpc.io/docs/client/react/useUtils
    */
-  useUtils(): CreateReactUtilsProxy<TRouter, TSSRContext>;
+  useUtils(): CreateReactUtils<TRouter, TSSRContext>;
   Provider: TRPCProvider<TRouter, TSSRContext>;
   createClient: CreateClient<TRouter>;
   useQueries: TRPCUseQueries<TRouter>;
@@ -252,26 +269,30 @@ export type CreateTRPCReact<
   TFlags,
 > = ProtectedIntersection<
   CreateTRPCReactBase<TRouter, TSSRContext>,
-  DecoratedProcedureRecord<TRouter['_def']['record'], TFlags>
+  DecoratedProcedureRecord<
+    TRouter['_def']['_config'],
+    TRouter['_def']['record'],
+    TFlags
+  >
 >;
 
 /**
  * @internal
  */
-export function createHooksInternalProxy<
+export function createHooksInternal<
   TRouter extends AnyRouter,
   TSSRContext = unknown,
   TFlags = null,
 >(trpc: CreateReactQueryHooks<TRouter, TSSRContext>) {
-  type CreateHooksInternalProxy = CreateTRPCReact<TRouter, TSSRContext, TFlags>;
+  type CreateHooksInternal = CreateTRPCReact<TRouter, TSSRContext, TFlags>;
 
-  return createFlatProxy<CreateHooksInternalProxy>((key) => {
+  return createFlatProxy<CreateHooksInternal>((key) => {
     if (key === 'useContext' || key === 'useUtils') {
       return () => {
         const context = trpc.useUtils();
         // create a stable reference of the utils context
         return useMemo(() => {
-          return (createReactQueryUtilsProxy as any)(context);
+          return (createReactQueryUtils as any)(context);
         }, [context]);
       };
     }
@@ -280,7 +301,7 @@ export function createHooksInternalProxy<
       return (trpc as any)[key];
     }
 
-    return createReactProxyDecoration(key, trpc);
+    return createReactDecoration(key, trpc);
   });
 }
 
@@ -291,8 +312,8 @@ export function createTRPCReact<
 >(
   opts?: CreateTRPCReactOptions<TRouter>,
 ): CreateTRPCReact<TRouter, TSSRContext, TFlags> {
-  const hooks = createHooksInternal<TRouter, TSSRContext>(opts);
-  const proxy = createHooksInternalProxy<TRouter, TSSRContext, TFlags>(hooks);
+  const hooks = createRootHooks<TRouter, TSSRContext>(opts);
+  const proxy = createHooksInternal<TRouter, TSSRContext, TFlags>(hooks);
 
   return proxy as any;
 }

package/src/index.ts

@@ -2,5 +2,4 @@ export * from '@trpc/client';
 
 export { getQueryKey } from './internals/getQueryKey';
 export { createTRPCReact, type CreateTRPCReact } from './createTRPCReact';
-export { createReactQueryHooks } from './interop';
 export type { inferReactQueryProcedureOptions } from './utils/inferReactQueryProcedure';