@trpc/react-query 11.0.0-next.91 → 11.0.0-rc.329

package/src/createTRPCReact.tsx

@@ -1,37 +1,30 @@
-import { TRPCClientErrorLike } from '@trpc/client';
-import {
-  AnyMutationProcedure,
+import type { SkipToken } from '@tanstack/react-query';
+import type { TRPCClientErrorLike } from '@trpc/client';
+import type {
   AnyProcedure,
-  AnyQueryProcedure,
-  AnyRootConfig,
+  AnyRootTypes,
   AnyRouter,
-  AnySubscriptionProcedure,
   inferProcedureInput,
-  ProcedureRouterRecord,
-  ProtectedIntersection,
-} from '@trpc/server';
-import {
-  createFlatProxy,
   inferTransformedProcedureOutput,
-  inferTransformedSubscriptionOutput,
-} from '@trpc/server/shared';
-import { useMemo } from 'react';
-import { TRPCUseQueries } from './internals/useQueries';
-import {
-  createReactDecoration,
-  createReactQueryUtils,
-  CreateReactUtils,
-} from './shared';
-import {
-  CreateReactQueryHooks,
-  createRootHooks,
-} from './shared/hooks/createHooksInternal';
-import {
+  ProcedureType,
+  ProtectedIntersection,
+  RouterRecord,
+} from '@trpc/server/unstable-core-do-not-import';
+import { createFlatProxy } from '@trpc/server/unstable-core-do-not-import';
+import * as React from 'react';
+import type {
+  TRPCUseQueries,
+  TRPCUseSuspenseQueries,
+} from './internals/useQueries';
+import type { CreateReactUtils } from './shared';
+import { createReactDecoration, createReactQueryUtils } from './shared';
+import type { CreateReactQueryHooks } from './shared/hooks/createHooksInternal';
+import { createRootHooks } from './shared/hooks/createHooksInternal';
+import type {
   CreateClient,
   DefinedUseTRPCQueryOptions,
   DefinedUseTRPCQueryResult,
   TRPCProvider,
-  UseDehydratedState,
   UseTRPCInfiniteQueryOptions,
   UseTRPCInfiniteQueryResult,
   UseTRPCMutationOptions,
@@ -44,46 +37,46 @@ import {
   UseTRPCSuspenseQueryOptions,
   UseTRPCSuspenseQueryResult,
 } from './shared/hooks/types';
-import { CreateTRPCReactOptions } from './shared/types';
+import type { CreateTRPCReactOptions } from './shared/types';
 
+type ResolverDef = {
+  input: any;
+  output: any;
+  transformer: boolean;
+  errorShape: any;
+};
 /**
  * @internal
  */
-export interface ProcedureUseQuery<
-  TConfig extends AnyRootConfig,
-  TProcedure extends AnyProcedure,
-> {
-  <
-    TQueryFnData extends inferTransformedProcedureOutput<
-      TConfig,
-      TProcedure
-    > = inferTransformedProcedureOutput<TConfig, TProcedure>,
-    TData = TQueryFnData,
-  >(
-    input: inferProcedureInput<TProcedure>,
+export interface ProcedureUseQuery<TDef extends ResolverDef> {
+  <TQueryFnData extends TDef['output'] = TDef['output'], TData = TQueryFnData>(
+    input: TDef['input'] | SkipToken,
     opts: DefinedUseTRPCQueryOptions<
       TQueryFnData,
       TData,
-      TRPCClientErrorLike<TConfig>,
-      inferTransformedProcedureOutput<TConfig, TProcedure>
+      TRPCClientErrorLike<{
+        errorShape: TDef['errorShape'];
+        transformer: TDef['transformer'];
+      }>,
+      TDef['output']
     >,
-  ): DefinedUseTRPCQueryResult<TData, TRPCClientErrorLike<TConfig>>;
+  ): DefinedUseTRPCQueryResult<
+    TData,
+    TRPCClientErrorLike<{
+      errorShape: TDef['errorShape'];
+      transformer: TDef['transformer'];
+    }>
+  >;
 
-  <
-    TQueryFnData extends inferTransformedProcedureOutput<
-      TConfig,
-      TProcedure
-    > = inferTransformedProcedureOutput<TConfig, TProcedure>,
-    TData = TQueryFnData,
-  >(
-    input: inferProcedureInput<TProcedure>,
+  <TQueryFnData extends TDef['output'] = TDef['output'], TData = TQueryFnData>(
+    input: TDef['input'] | SkipToken,
     opts?: UseTRPCQueryOptions<
       TQueryFnData,
       TData,
-      TRPCClientErrorLike<TConfig>,
-      inferTransformedProcedureOutput<TConfig, TProcedure>
+      TRPCClientErrorLike<TDef>,
+      TDef['output']
     >,
-  ): UseTRPCQueryResult<TData, TRPCClientErrorLike<TConfig>>;
+  ): UseTRPCQueryResult<TData, TRPCClientErrorLike<TDef>>;
 }
 
 /**
@@ -93,132 +86,114 @@ type CursorInput = {
   cursor?: any;
 } | void;
 
+type ReservedInfiniteQueryKeys = 'cursor' | 'direction';
 /**
  * @internal
  */
-export type MaybeDecoratedInfiniteQuery<
-  TProcedure extends AnyProcedure,
-  TConfig extends AnyRootConfig,
-> = inferProcedureInput<TProcedure> extends CursorInput
-  ? {
-      /**
-       * @see https://trpc.io/docs/client/react/suspense#useinfinitesuspensequery
-       */
-      useInfiniteQuery: (
-        input: Omit<inferProcedureInput<TProcedure>, 'cursor'>,
-        opts: UseTRPCInfiniteQueryOptions<
-          inferProcedureInput<TProcedure>,
-          inferTransformedProcedureOutput<TConfig, TProcedure>,
-          TRPCClientErrorLike<TConfig>
-        >,
-      ) => UseTRPCInfiniteQueryResult<
-        inferTransformedProcedureOutput<TConfig, TProcedure>,
-        TRPCClientErrorLike<TConfig>,
-        inferProcedureInput<TProcedure>
-      >;
-      /**
-       * @see https://trpc.io/docs/client/react/suspense
-       */
-      useSuspenseInfiniteQuery: (
-        input: Omit<inferProcedureInput<TProcedure>, 'cursor'>,
-        opts: UseTRPCSuspenseInfiniteQueryOptions<
-          inferProcedureInput<TProcedure>,
-          inferTransformedProcedureOutput<TConfig, TProcedure>,
-          TRPCClientErrorLike<TConfig>
-        >,
-      ) => UseTRPCSuspenseInfiniteQueryResult<
-        inferTransformedProcedureOutput<TConfig, TProcedure>,
-        TRPCClientErrorLike<TConfig>,
-        inferProcedureInput<TProcedure>
-      >;
-    }
-  : object;
+export type MaybeDecoratedInfiniteQuery<TDef extends ResolverDef> =
+  TDef['input'] extends CursorInput
+    ? {
+        /**
+         * @link https://trpc.io/docs/v11/client/react/suspense#useinfinitesuspensequery
+         */
+        useInfiniteQuery: (
+          input: Omit<TDef['input'], ReservedInfiniteQueryKeys> | SkipToken,
+          opts: UseTRPCInfiniteQueryOptions<
+            TDef['input'],
+            TDef['output'],
+            TRPCClientErrorLike<TDef>
+          >,
+        ) => UseTRPCInfiniteQueryResult<
+          TDef['output'],
+          TRPCClientErrorLike<TDef>,
+          TDef['input']
+        >;
+        /**
+         * @link https://trpc.io/docs/v11/client/react/suspense
+         */
+        useSuspenseInfiniteQuery: (
+          input: Omit<TDef['input'], 'cursor' | 'direction'>,
+          opts: UseTRPCSuspenseInfiniteQueryOptions<
+            TDef['input'],
+            TDef['output'],
+            TRPCClientErrorLike<TDef>
+          >,
+        ) => UseTRPCSuspenseInfiniteQueryResult<
+          TDef['output'],
+          TRPCClientErrorLike<TDef>,
+          TDef['input']
+        >;
+      }
+    : object;
 
 /**
  * @internal
  */
-export type DecoratedQueryMethods<
-  TConfig extends AnyRootConfig,
-  TProcedure extends AnyProcedure,
-> = {
+export type DecoratedQueryMethods<TDef extends ResolverDef> = {
   /**
-   * @see https://trpc.io/docs/client/react/useQuery
+   * @link https://trpc.io/docs/v11/client/react/useQuery
    */
-  useQuery: ProcedureUseQuery<TConfig, TProcedure>;
+  useQuery: ProcedureUseQuery<TDef>;
   /**
-   * @see https://trpc.io/docs/client/react/suspense#usesuspensequery
+   * @link https://trpc.io/docs/v11/client/react/suspense#usesuspensequery
    */
   useSuspenseQuery: <
-    TQueryFnData extends inferTransformedProcedureOutput<
-      TConfig,
-      TProcedure
-    > = inferTransformedProcedureOutput<TConfig, TProcedure>,
+    TQueryFnData extends TDef['output'] = TDef['output'],
     TData = TQueryFnData,
   >(
-    input: inferProcedureInput<TProcedure>,
+    input: TDef['input'],
     opts?: UseTRPCSuspenseQueryOptions<
       TQueryFnData,
       TData,
-      TRPCClientErrorLike<TConfig>
+      TRPCClientErrorLike<TDef>
     >,
-  ) => UseTRPCSuspenseQueryResult<TData, TRPCClientErrorLike<TConfig>>;
+  ) => UseTRPCSuspenseQueryResult<TData, TRPCClientErrorLike<TDef>>;
 };
 
 /**
  * @internal
  */
-export type DecoratedQuery<
-  TConfig extends AnyRootConfig,
-  TProcedure extends AnyProcedure,
-> = MaybeDecoratedInfiniteQuery<TProcedure, TConfig> &
-  DecoratedQueryMethods<TConfig, TProcedure>;
+export type DecoratedQuery<TDef extends ResolverDef> =
+  MaybeDecoratedInfiniteQuery<TDef> & DecoratedQueryMethods<TDef>;
 
-/**
- * @internal
- */
-export interface DecoratedMutation<
-  TConfig extends AnyRootConfig,
-  TProcedure extends AnyProcedure,
-> {
+export type DecoratedMutation<TDef extends ResolverDef> = {
   /**
-   * @see https://trpc.io/docs/client/react/useMutation
+   * @link https://trpc.io/docs/v11/client/react/useMutation
    */
   useMutation: <TContext = unknown>(
     opts?: UseTRPCMutationOptions<
-      inferProcedureInput<TProcedure>,
-      TRPCClientErrorLike<TConfig>,
-      inferTransformedProcedureOutput<TConfig, TProcedure>,
+      TDef['input'],
+      TRPCClientErrorLike<TDef>,
+      TDef['output'],
       TContext
     >,
   ) => UseTRPCMutationResult<
-    inferTransformedProcedureOutput<TConfig, TProcedure>,
-    TRPCClientErrorLike<TConfig>,
-    inferProcedureInput<TProcedure>,
+    TDef['output'],
+    TRPCClientErrorLike<TDef>,
+    TDef['input'],
     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
+  TType extends ProcedureType,
+  TDef extends ResolverDef,
+> = TType extends 'query'
+  ? DecoratedQuery<TDef>
+  : TType extends 'mutation'
+  ? DecoratedMutation<TDef>
+  : TType extends 'subscription'
   ? {
       /**
-       * @see https://trpc.io/docs/subscriptions
+       * @link https://trpc.io/docs/v11/subscriptions
        */
       useSubscription: (
-        input: inferProcedureInput<TProcedure>,
+        input: TDef['input'],
         opts?: UseTRPCSubscriptionOptions<
-          inferTransformedSubscriptionOutput<TConfig, TProcedure>,
-          TRPCClientErrorLike<TConfig>
+          TDef['output'],
+          TRPCClientErrorLike<TDef>
         >,
       ) => void;
     }
@@ -227,19 +202,24 @@ export type DecorateProcedure<
 /**
  * @internal
  */
-export type DecoratedProcedureRecord<
-  TConfig extends AnyRootConfig,
-  TProcedures extends ProcedureRouterRecord,
-  TFlags,
+export type DecorateRouterRecord<
+  TRoot extends AnyRootTypes,
+  TRecord extends RouterRecord,
 > = {
-  [TKey in keyof TProcedures]: TProcedures[TKey] extends AnyRouter
-    ? DecoratedProcedureRecord<
-        TConfig,
-        TProcedures[TKey]['_def']['record'],
-        TFlags
-      >
-    : TProcedures[TKey] extends AnyProcedure
-    ? DecorateProcedure<TConfig, TProcedures[TKey], TFlags>
+  [TKey in keyof TRecord]: TRecord[TKey] extends infer $Value
+    ? $Value extends RouterRecord
+      ? DecorateRouterRecord<TRoot, $Value>
+      : $Value extends AnyProcedure
+      ? DecorateProcedure<
+          $Value['_def']['type'],
+          {
+            input: inferProcedureInput<$Value>;
+            output: inferTransformedProcedureOutput<TRoot, $Value>;
+            transformer: TRoot['transformer'];
+            errorShape: TRoot['errorShape'];
+          }
+        >
+      : never
     : never;
 };
 
@@ -250,29 +230,27 @@ export type CreateTRPCReactBase<TRouter extends AnyRouter, TSSRContext> = {
   /**
    * @deprecated renamed to `useUtils` and will be removed in a future tRPC version
    *
-   * @see https://trpc.io/docs/client/react/useUtils
+   * @link https://trpc.io/docs/v11/client/react/useUtils
    */
   useContext(): CreateReactUtils<TRouter, TSSRContext>;
   /**
-   * @see https://trpc.io/docs/client/react/useUtils
+   * @link https://trpc.io/docs/v11/client/react/useUtils
    */
   useUtils(): CreateReactUtils<TRouter, TSSRContext>;
   Provider: TRPCProvider<TRouter, TSSRContext>;
   createClient: CreateClient<TRouter>;
   useQueries: TRPCUseQueries<TRouter>;
-  useDehydratedState: UseDehydratedState<TRouter>;
+  useSuspenseQueries: TRPCUseSuspenseQueries<TRouter>;
 };
 
 export type CreateTRPCReact<
   TRouter extends AnyRouter,
   TSSRContext,
-  TFlags,
 > = ProtectedIntersection<
   CreateTRPCReactBase<TRouter, TSSRContext>,
-  DecoratedProcedureRecord<
-    TRouter['_def']['_config'],
-    TRouter['_def']['record'],
-    TFlags
+  DecorateRouterRecord<
+    TRouter['_def']['_config']['$types'],
+    TRouter['_def']['record']
   >
 >;
 
@@ -282,16 +260,15 @@ export type CreateTRPCReact<
 export function createHooksInternal<
   TRouter extends AnyRouter,
   TSSRContext = unknown,
-  TFlags = null,
 >(trpc: CreateReactQueryHooks<TRouter, TSSRContext>) {
-  type CreateHooksInternal = CreateTRPCReact<TRouter, TSSRContext, TFlags>;
+  type CreateHooksInternal = CreateTRPCReact<TRouter, TSSRContext>;
 
   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 React.useMemo(() => {
           return (createReactQueryUtils as any)(context);
         }, [context]);
       };
@@ -308,12 +285,11 @@ export function createHooksInternal<
 export function createTRPCReact<
   TRouter extends AnyRouter,
   TSSRContext = unknown,
-  TFlags = null,
 >(
   opts?: CreateTRPCReactOptions<TRouter>,
-): CreateTRPCReact<TRouter, TSSRContext, TFlags> {
+): CreateTRPCReact<TRouter, TSSRContext> {
   const hooks = createRootHooks<TRouter, TSSRContext>(opts);
-  const proxy = createHooksInternal<TRouter, TSSRContext, TFlags>(hooks);
+  const proxy = createHooksInternal<TRouter, TSSRContext>(hooks);
 
   return proxy as any;
 }

package/src/index.ts

@@ -1,5 +1,10 @@
 export * from '@trpc/client';
 
 export { getQueryKey } from './internals/getQueryKey';
-export { createTRPCReact, type CreateTRPCReact } from './createTRPCReact';
+export {
+  createTRPCReact,
+  type CreateTRPCReact,
+  type CreateTRPCReactBase,
+} from './createTRPCReact';
 export type { inferReactQueryProcedureOptions } from './utils/inferReactQueryProcedure';
+export { createTRPCQueryUtils } from './createTRPCQueryUtils';

package/src/internals/context.tsx

@@ -1,4 +1,4 @@
-import {
+import type {
   CancelOptions,
   FetchInfiniteQueryOptions,
   FetchQueryOptions,
@@ -13,16 +13,19 @@ import {
   SetDataOptions,
   Updater,
 } from '@tanstack/react-query';
-import {
+import type {
   CreateTRPCClient,
   TRPCClientError,
   TRPCRequestOptions,
   TRPCUntypedClient,
 } from '@trpc/client';
-import type { AnyRouter, DistributiveOmit } from '@trpc/server';
-import { createContext } from 'react';
-import { ExtractCursorType } from '../shared';
-import { TRPCQueryKey } from './getQueryKey';
+import type {
+  AnyRouter,
+  DistributiveOmit,
+} from '@trpc/server/unstable-core-do-not-import';
+import * as React from 'react';
+import type { ExtractCursorType } from '../shared';
+import type { TRPCQueryKey } from './getQueryKey';
 
 export type TRPCFetchQueryOptions<TOutput, TError> = DistributiveOmit<
   FetchQueryOptions<TOutput, TError>,
@@ -106,7 +109,13 @@ export const contextProps: (keyof TRPCContextPropsBase<any, any>)[] = [
 export interface TRPCContextState<
   TRouter extends AnyRouter,
   TSSRContext = undefined,
-> extends Required<TRPCContextProps<TRouter, TSSRContext>> {
+> extends Required<TRPCContextProps<TRouter, TSSRContext>>,
+    TRPCQueryUtils<TRouter> {}
+
+/**
+ * @internal
+ */
+export interface TRPCQueryUtils<TRouter extends AnyRouter> {
   /**
    * @link https://tanstack.com/query/v5/docs/reference/QueryClient#queryclientfetchquery
    */
@@ -126,7 +135,7 @@ export interface TRPCContextState<
     >,
   ) => Promise<InfiniteData<unknown, unknown>>;
   /**
-   * @link https://tanstack.com/query/v5/docs/react/guides/prefetching
+   * @link https://tanstack.com/query/v5/docs/framework/react/guides/prefetching
    */
   prefetchQuery: (
     queryKey: TRPCQueryKey,
@@ -146,7 +155,7 @@ export interface TRPCContextState<
   ) => Promise<void>;
 
   /**
-   * @link https://tanstack.com/query/v5/docs/react/reference/QueryClient#queryclientensurequerydata
+   * @link https://tanstack.com/query/v5/docs/reference/QueryClient#queryclientensurequerydata
    */
   ensureQueryData: (
     queryKey: TRPCQueryKey,
@@ -154,7 +163,7 @@ export interface TRPCContextState<
   ) => Promise<unknown>;
 
   /**
-   * @link https://tanstack.com/query/v5/docs/react/guides/query-invalidation
+   * @link https://tanstack.com/query/v5/docs/framework/react/guides/query-invalidation
    */
   invalidateQueries: (
     queryKey: TRPCQueryKey,
@@ -163,7 +172,7 @@ export interface TRPCContextState<
   ) => Promise<void>;
 
   /**
-   * @link https://tanstack.com/query/v5/docs/react/reference/QueryClient#queryclientresetqueries
+   * @link https://tanstack.com/query/v5/docs/reference/QueryClient#queryclientresetqueries
    */
   resetQueries: (
     queryKey: TRPCQueryKey,
@@ -172,7 +181,7 @@ export interface TRPCContextState<
   ) => Promise<void>;
 
   /**
-   * @link https://tanstack.com/query/v5/docs/react/reference/QueryClient#queryclientrefetchqueries
+   * @link https://tanstack.com/query/v5/docs/reference/QueryClient#queryclientrefetchqueries
    */
   refetchQueries: (
     queryKey: TRPCQueryKey,
@@ -181,7 +190,7 @@ export interface TRPCContextState<
   ) => Promise<void>;
 
   /**
-   * @link https://tanstack.com/query/v5/docs/react/guides/query-cancellation
+   * @link https://tanstack.com/query/v5/docs/framework/react/guides/query-cancellation
    */
   cancelQuery: (
     queryKey: TRPCQueryKey,
@@ -189,7 +198,7 @@ export interface TRPCContextState<
   ) => Promise<void>;
 
   /**
-   * @link https://tanstack.com/query/v5/docs/react/reference/QueryClient#queryclientsetquerydata
+   * @link https://tanstack.com/query/v5/docs/reference/QueryClient#queryclientsetquerydata
    */
   setQueryData: (
     queryKey: TRPCQueryKey,
@@ -198,11 +207,11 @@ export interface TRPCContextState<
   ) => void;
 
   /**
-   * @link https://tanstack.com/query/v5/docs/react/reference/QueryClient#queryclientgetquerydata
+   * @link https://tanstack.com/query/v5/docs/reference/QueryClient#queryclientgetquerydata
    */
   getQueryData: (queryKey: TRPCQueryKey) => unknown;
   /**
-   * @link https://tanstack.com/query/v5/docs/react/reference/QueryClient#queryclientsetquerydata
+   * @link https://tanstack.com/query/v5/docs/reference/QueryClient#queryclientsetquerydata
    */
   setInfiniteQueryData: (
     queryKey: TRPCQueryKey,
@@ -214,10 +223,10 @@ export interface TRPCContextState<
   ) => void;
 
   /**
-   * @link https://tanstack.com/query/v5/docs/react/reference/QueryClient#queryclientgetquerydata
+   * @link https://tanstack.com/query/v5/docs/reference/QueryClient#queryclientgetquerydata
    */
   getInfiniteQueryData: (
     queryKey: TRPCQueryKey,
   ) => InfiniteData<unknown> | undefined;
 }
-export const TRPCContext = createContext(null as any);
+export const TRPCContext = React.createContext?.(null as any);

package/src/internals/getClientArgs.ts

@@ -1,12 +1,24 @@
-import { TRPCQueryKey } from './getQueryKey';
+import type { TRPCQueryKey } from './getQueryKey';
 
+/**
+ * @internal
+ */
 export function getClientArgs<TOptions>(
   queryKey: TRPCQueryKey,
   opts: TOptions,
-  pageParam?: any,
+  infiniteParams?: {
+    pageParam: any;
+    direction: 'forward' | 'backward';
+  },
 ) {
   const path = queryKey[0];
-  const input = queryKey[1]?.input;
-  if (pageParam) (input as any).cursor = pageParam;
+  let input = queryKey[1]?.input;
+  if (infiniteParams) {
+    input = {
+      ...(input ?? {}),
+      ...(infiniteParams.pageParam ? { cursor: infiniteParams.pageParam } : {}),
+      direction: infiniteParams.direction,
+    };
+  }
   return [path.join('.'), input, (opts as any)?.trpc] as const;
 }