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

package/src/internals/getQueryKey.ts

@@ -1,12 +1,10 @@
+import { skipToken } from '@tanstack/react-query';
 import {
-  AnyMutationProcedure,
-  AnyQueryProcedure,
-  AnyRootConfig,
-  AnyRouter,
-  DeepPartial,
-  inferProcedureInput,
-} from '@trpc/server';
-import { DecoratedProcedureRecord, DecorateProcedure } from '../shared';
+  isObject,
+  type DeepPartial,
+} from '@trpc/server/unstable-core-do-not-import';
+import type { DecoratedMutation, DecoratedQuery } from '../createTRPCReact';
+import type { DecorateRouterRecord } from '../shared';
 
 export type QueryType = 'any' | 'infinite' | 'query';
 
@@ -15,6 +13,11 @@ export type TRPCQueryKey = [
   { input?: unknown; type?: Exclude<QueryType, 'any'> }?,
 ];
 
+type ProcedureOrRouter =
+  | DecoratedMutation<any>
+  | DecoratedQuery<any>
+  | DecorateRouterRecord<any, any>;
+
 /**
  * To allow easy interactions with groups of related queries, such as
  * invalidating all queries of a router, we use an array as the path when
@@ -32,14 +35,35 @@ export function getQueryKeyInternal(
   // some parts of the path may be dot-separated, split them up
   const splitPath = path.flatMap((part) => part.split('.'));
 
-  if (!input && (!type || type === 'any'))
+  if (!input && (!type || type === 'any')) {
     // for `utils.invalidate()` to match all queries (including vanilla react-query)
     // we don't want nested array if path is empty, i.e. `[]` instead of `[[]]`
     return splitPath.length ? [splitPath] : ([] as unknown as TRPCQueryKey);
+  }
+
+  if (
+    type === 'infinite' &&
+    isObject(input) &&
+    ('direction' in input || 'cursor' in input)
+  ) {
+    const {
+      cursor: _,
+      direction: __,
+      ...inputWithoutCursorAndDirection
+    } = input;
+    return [
+      splitPath,
+      {
+        input: inputWithoutCursorAndDirection,
+        type: 'infinite',
+      },
+    ];
+  }
   return [
     splitPath,
     {
-      ...(typeof input !== 'undefined' && { input: input }),
+      ...(typeof input !== 'undefined' &&
+        input !== skipToken && { input: input }),
       ...(type && type !== 'any' && { type: type }),
     },
   ];
@@ -47,10 +71,13 @@ export function getQueryKeyInternal(
 
 type GetInfiniteQueryInput<
   TProcedureInput,
-  TInputWithoutCursor = Omit<TProcedureInput, 'cursor'>,
-> = keyof TInputWithoutCursor extends never
+  TInputWithoutCursorAndDirection = Omit<
+    TProcedureInput,
+    'cursor' | 'direction'
+  >,
+> = keyof TInputWithoutCursorAndDirection extends never
   ? undefined
-  : DeepPartial<TInputWithoutCursor> | undefined;
+  : DeepPartial<TInputWithoutCursorAndDirection> | undefined;
 
 /** @internal */
 export type GetQueryProcedureInput<TProcedureInput> = TProcedureInput extends {
@@ -59,62 +86,24 @@ export type GetQueryProcedureInput<TProcedureInput> = TProcedureInput extends {
   ? GetInfiniteQueryInput<TProcedureInput>
   : DeepPartial<TProcedureInput> | undefined;
 
-type GetQueryParams<
-  TProcedureOrRouter extends AnyQueryProcedure,
-  TProcedureInput = inferProcedureInput<TProcedureOrRouter>,
-> = TProcedureInput extends undefined
-  ? []
-  : [input?: GetQueryProcedureInput<TProcedureInput>, type?: QueryType];
-
-type GetParams<
-  TConfig extends AnyRootConfig,
-  TProcedureOrRouter extends
-    | AnyMutationProcedure
-    | AnyQueryProcedure
-    | AnyRouter,
-  TFlags,
-> = TProcedureOrRouter extends AnyQueryProcedure
-  ? [
-      procedureOrRouter: DecorateProcedure<TConfig, TProcedureOrRouter, TFlags>,
-      ..._params: GetQueryParams<TProcedureOrRouter>,
-    ]
-  : TProcedureOrRouter extends AnyMutationProcedure
-  ? [procedureOrRouter: DecorateProcedure<TConfig, TProcedureOrRouter, TFlags>]
-  : TProcedureOrRouter extends AnyRouter
-  ? [
-      procedureOrRouter: DecoratedProcedureRecord<
-        TConfig,
-        TProcedureOrRouter['_def']['record'],
-        TFlags
-      >,
-    ]
-  : never;
-
-type GetQueryKeyParams<
-  TConfig extends AnyRootConfig,
-  TProcedureOrRouter extends
-    | AnyMutationProcedure
-    | AnyQueryProcedure
-    | AnyRouter,
-  TFlags,
-> = GetParams<TConfig, TProcedureOrRouter, TFlags>;
+type GetParams<TProcedureOrRouter extends ProcedureOrRouter> =
+  TProcedureOrRouter extends DecoratedQuery<infer $Def>
+    ? [input?: GetQueryProcedureInput<$Def['input']>, type?: QueryType]
+    : [];
 
 /**
  * Method to extract the query key for a procedure
  * @param procedureOrRouter - procedure or AnyRouter
  * @param input - input to procedureOrRouter
  * @param type - defaults to `any`
- * @link https://trpc.io/docs/getQueryKey
+ * @link https://trpc.io/docs/v11/getQueryKey
  */
-export function getQueryKey<
-  TConfig extends AnyRootConfig,
-  TProcedureOrRouter extends
-    | AnyMutationProcedure
-    | AnyQueryProcedure
-    | AnyRouter,
-  TFlags,
->(..._params: GetQueryKeyParams<TConfig, TProcedureOrRouter, TFlags>) {
-  const [procedureOrRouter, input, type] = _params;
+export function getQueryKey<TProcedureOrRouter extends ProcedureOrRouter>(
+  procedureOrRouter: TProcedureOrRouter,
+  ..._params: GetParams<TProcedureOrRouter>
+) {
+  const [input, type] = _params;
+
   // @ts-expect-error - we don't expose _def on the type layer
   const path = procedureOrRouter._def().path as string[];
   const queryKey = getQueryKeyInternal(path, input, type ?? 'any');

package/src/internals/useHookResult.ts

@@ -1,18 +1,17 @@
-import { useRef } from 'react';
-
-export interface TRPCHookResult {
-  trpc: {
-    path: string;
-  };
-}
+import * as React from 'react';
+import type { TRPCHookResult } from '../shared/hooks/types';
 
 /**
  * Makes a stable reference of the `trpc` prop
  */
-export function useHookResult(
-  value: TRPCHookResult['trpc'],
-): TRPCHookResult['trpc'] {
-  const ref = useRef(value);
-  ref.current.path = value.path;
-  return ref.current;
+export function useHookResult(value: {
+  path: string[];
+}): TRPCHookResult['trpc'] {
+  const path = value.path.join('.');
+  return React.useMemo(
+    () => ({
+      path,
+    }),
+    [path],
+  );
 }

package/src/internals/useQueries.ts

@@ -1,9 +1,19 @@
-import { QueryKey, UseQueryOptions } from '@tanstack/react-query';
-import { AnyRouter, DistributiveOmit } from '@trpc/server';
-import {
+import type {
+  QueryKey,
+  UseQueryOptions,
+  UseSuspenseQueryOptions,
+  UseSuspenseQueryResult,
+} from '@tanstack/react-query';
+import type {
+  AnyRouter,
+  DistributiveOmit,
+} from '@trpc/server/unstable-core-do-not-import';
+import type {
   UseQueriesProcedureRecord,
+  UseSuspenseQueriesProcedureRecord,
   UseTRPCQueryOptions,
   UseTRPCQueryResult,
+  UseTRPCSuspenseQueryOptions,
 } from '../shared';
 
 /**
@@ -19,12 +29,34 @@ export type UseQueryOptionsForUseQueries<
   'queryKey'
 >;
 
+/**
+ * @internal
+ */
+export type UseQueryOptionsForUseSuspenseQueries<
+  TQueryFnData = unknown,
+  TError = unknown,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+> = DistributiveOmit<
+  UseSuspenseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
+  'queryKey'
+>;
+
 /**
  * @internal
  */
 export type TrpcQueryOptionsForUseQueries<TOutput, TData, TError> =
   DistributiveOmit<UseTRPCQueryOptions<TOutput, TData, TError>, 'queryKey'>;
 
+/**
+ * @internal
+ */
+export type TrpcQueryOptionsForUseSuspenseQueries<TOutput, TData, TError> =
+  DistributiveOmit<
+    UseTRPCSuspenseQueryOptions<TOutput, TData, TError>,
+    'queryKey'
+  >;
+
 /**
  * @internal
  */
@@ -41,6 +73,44 @@ export declare type QueriesResults<
     : never;
 };
 
+/**
+ * @internal
+ */
+export declare type SuspenseQueriesResults<
+  TQueriesOptions extends UseQueryOptionsForUseSuspenseQueries<
+    any,
+    any,
+    any,
+    any
+  >[],
+> = [
+  {
+    [TKey in keyof TQueriesOptions]: TQueriesOptions[TKey] extends UseQueryOptionsForUseSuspenseQueries<
+      infer TQueryFnData,
+      any,
+      infer TData,
+      any
+    >
+      ? unknown extends TData
+        ? TQueryFnData
+        : TData
+      : never;
+  },
+  {
+    [TKey in keyof TQueriesOptions]: TQueriesOptions[TKey] extends UseQueryOptionsForUseSuspenseQueries<
+      infer TQueryFnData,
+      infer TError,
+      infer TData,
+      any
+    >
+      ? UseSuspenseQueryResult<
+          unknown extends TData ? TQueryFnData : TData,
+          TError
+        >
+      : never;
+  },
+];
+
 type GetOptions<TQueryOptions> =
   TQueryOptions extends UseQueryOptionsForUseQueries<any, any, any, any>
     ? TQueryOptions
@@ -69,6 +139,39 @@ export type QueriesOptions<
   ? UseQueryOptionsForUseQueries<TQueryFnData, TError, TData, TQueryKey>[]
   : UseQueryOptionsForUseQueries[];
 
+type GetSuspenseOptions<TQueryOptions> =
+  TQueryOptions extends UseQueryOptionsForUseSuspenseQueries<any, any, any, any>
+    ? TQueryOptions
+    : never;
+
+/**
+ * @internal
+ */
+export type SuspenseQueriesOptions<
+  TQueriesOptions extends any[],
+  TResult extends any[] = [],
+> = TQueriesOptions extends []
+  ? []
+  : TQueriesOptions extends [infer Head]
+  ? [...TResult, GetSuspenseOptions<Head>]
+  : TQueriesOptions extends [infer Head, ...infer Tail]
+  ? QueriesOptions<Tail, [...TResult, GetSuspenseOptions<Head>]>
+  : unknown[] extends TQueriesOptions
+  ? TQueriesOptions
+  : TQueriesOptions extends UseQueryOptionsForUseSuspenseQueries<
+      infer TQueryFnData,
+      infer TError,
+      infer TData,
+      infer TQueryKey
+    >[]
+  ? UseQueryOptionsForUseSuspenseQueries<
+      TQueryFnData,
+      TError,
+      TData,
+      TQueryKey
+    >[]
+  : UseQueryOptionsForUseSuspenseQueries[];
+
 /**
  * @internal
  */
@@ -76,6 +179,28 @@ export type TRPCUseQueries<TRouter extends AnyRouter> = <
   TQueryOptions extends UseQueryOptionsForUseQueries<any, any, any, any>[],
 >(
   queriesCallback: (
-    t: UseQueriesProcedureRecord<TRouter>,
+    t: UseQueriesProcedureRecord<
+      TRouter['_def']['_config']['$types'],
+      TRouter['_def']['record']
+    >,
   ) => readonly [...QueriesOptions<TQueryOptions>],
 ) => QueriesResults<TQueryOptions>;
+
+/**
+ * @internal
+ */
+export type TRPCUseSuspenseQueries<TRouter extends AnyRouter> = <
+  TQueryOptions extends UseQueryOptionsForUseSuspenseQueries<
+    any,
+    any,
+    any,
+    any
+  >[],
+>(
+  queriesCallback: (
+    t: UseSuspenseQueriesProcedureRecord<
+      TRouter['_def']['_config']['$types'],
+      TRouter['_def']['record']
+    >,
+  ) => readonly [...SuspenseQueriesOptions<TQueryOptions>],
+) => SuspenseQueriesResults<TQueryOptions>;

package/src/server/ssgProxy.ts

@@ -1,49 +1,48 @@
-import {
-  dehydrate,
+import type {
   DehydratedState,
   DehydrateOptions,
   InfiniteData,
   QueryClient,
 } from '@tanstack/react-query';
+import { dehydrate } from '@tanstack/react-query';
+import type { inferRouterClient, TRPCClientError } from '@trpc/client';
+import { getUntypedClient, TRPCUntypedClient } from '@trpc/client';
+import type { CoercedTransformerParameters } from '@trpc/client/unstable-internals';
 import {
-  getUntypedClient,
-  inferRouterClient,
-  TRPCClientError,
-  TRPCUntypedClient,
-} from '@trpc/client';
-import {
+  getTransformer,
+  type TransformerOptions,
+} from '@trpc/client/unstable-internals';
+import type {
   AnyProcedure,
   AnyQueryProcedure,
-  AnyRootConfig,
+  AnyRootTypes,
   AnyRouter,
-  callProcedure,
-  ClientDataTransformerOptions,
-  Filter,
+  inferClientTypes,
   inferProcedureInput,
   inferRouterContext,
+  inferTransformedProcedureOutput,
   Maybe,
   ProtectedIntersection,
-} from '@trpc/server';
+  RouterRecord,
+} from '@trpc/server/unstable-core-do-not-import';
 import {
+  callProcedure,
   createFlatProxy,
   createRecursiveProxy,
-  inferTransformedProcedureOutput,
-} from '@trpc/server/shared';
+} from '@trpc/server/unstable-core-do-not-import';
 import { getQueryKeyInternal } from '../internals/getQueryKey';
-import {
+import type {
   CreateTRPCReactQueryClientConfig,
   ExtractCursorType,
-  getQueryClient,
-  getQueryType,
   TRPCFetchInfiniteQueryOptions,
   TRPCFetchQueryOptions,
 } from '../shared';
+import { getQueryClient, getQueryType } from '../shared';
 
-interface CreateSSGHelpersInternal<TRouter extends AnyRouter> {
+type CreateSSGHelpersInternal<TRouter extends AnyRouter> = {
   router: TRouter;
   ctx: inferRouterContext<TRouter>;
-  transformer?: ClientDataTransformerOptions;
-}
+} & TransformerOptions<inferClientTypes<TRouter>>;
 
 interface CreateSSGHelpersExternal<TRouter extends AnyRouter> {
   client: inferRouterClient<TRouter> | TRPCUntypedClient<TRouter>;
@@ -54,57 +53,57 @@ type CreateServerSideHelpersOptions<TRouter extends AnyRouter> =
     (CreateSSGHelpersExternal<TRouter> | CreateSSGHelpersInternal<TRouter>);
 
 type DecorateProcedure<
-  TConfig extends AnyRootConfig,
+  TRoot extends AnyRootTypes,
   TProcedure extends AnyProcedure,
 > = {
   /**
-   * @link https://tanstack.com/query/v5/docs/react/guides/prefetching
+   * @link https://tanstack.com/query/v5/docs/framework/react/guides/prefetching
    */
   fetch(
     input: inferProcedureInput<TProcedure>,
     opts?: TRPCFetchQueryOptions<
-      inferTransformedProcedureOutput<TConfig, TProcedure>,
-      TRPCClientError<TConfig>
+      inferTransformedProcedureOutput<TRoot, TProcedure>,
+      TRPCClientError<TRoot>
     >,
-  ): Promise<inferTransformedProcedureOutput<TConfig, TProcedure>>;
+  ): Promise<inferTransformedProcedureOutput<TRoot, TProcedure>>;
 
   /**
-   * @link https://tanstack.com/query/v5/docs/react/guides/prefetching
+   * @link https://tanstack.com/query/v5/docs/framework/react/guides/prefetching
    */
   fetchInfinite(
     input: inferProcedureInput<TProcedure>,
     opts?: TRPCFetchInfiniteQueryOptions<
       inferProcedureInput<TProcedure>,
-      inferTransformedProcedureOutput<TConfig, TProcedure>,
-      TRPCClientError<TConfig>
+      inferTransformedProcedureOutput<TRoot, TProcedure>,
+      TRPCClientError<TRoot>
     >,
   ): Promise<
     InfiniteData<
-      inferTransformedProcedureOutput<TConfig, TProcedure>,
+      inferTransformedProcedureOutput<TRoot, TProcedure>,
       NonNullable<ExtractCursorType<inferProcedureInput<TProcedure>>> | null
     >
   >;
 
   /**
-   * @link https://tanstack.com/query/v5/docs/react/guides/prefetching
+   * @link https://tanstack.com/query/v5/docs/framework/react/guides/prefetching
    */
   prefetch(
     input: inferProcedureInput<TProcedure>,
     opts?: TRPCFetchQueryOptions<
-      inferTransformedProcedureOutput<TConfig, TProcedure>,
-      TRPCClientError<TConfig>
+      inferTransformedProcedureOutput<TRoot, TProcedure>,
+      TRPCClientError<TRoot>
     >,
   ): Promise<void>;
 
   /**
-   * @link https://tanstack.com/query/v5/docs/react/guides/prefetching
+   * @link https://tanstack.com/query/v5/docs/framework/react/guides/prefetching
    */
   prefetchInfinite(
     input: inferProcedureInput<TProcedure>,
     opts?: TRPCFetchInfiniteQueryOptions<
       inferProcedureInput<TProcedure>,
-      inferTransformedProcedureOutput<TConfig, TProcedure>,
-      TRPCClientError<TConfig>
+      inferTransformedProcedureOutput<TRoot, TProcedure>,
+      TRPCClientError<TRoot>
     >,
   ): Promise<void>;
 };
@@ -112,40 +111,42 @@ type DecorateProcedure<
 /**
  * @internal
  */
-type DecoratedProcedureSSGRecord<TRouter extends AnyRouter> = {
-  [TKey in keyof Filter<
-    TRouter['_def']['record'],
-    AnyQueryProcedure | AnyRouter
-  >]: TRouter['_def']['record'][TKey] extends AnyRouter
-    ? DecoratedProcedureSSGRecord<TRouter['_def']['record'][TKey]>
-    : // utils only apply to queries
-      DecorateProcedure<
-        TRouter['_def']['_config'],
-        TRouter['_def']['record'][TKey]
-      >;
+type DecoratedProcedureSSGRecord<
+  TRoot extends AnyRootTypes,
+  TRecord extends RouterRecord,
+> = {
+  [TKey in keyof TRecord]: TRecord[TKey] extends infer $Value
+    ? $Value extends RouterRecord
+      ? DecoratedProcedureSSGRecord<TRoot, $Value>
+      : // utils only apply to queries
+      $Value extends AnyQueryProcedure
+      ? DecorateProcedure<TRoot, $Value>
+      : never
+    : never;
 };
 
 type AnyDecoratedProcedure = DecorateProcedure<any, any>;
 
 /**
  * Create functions you can use for server-side rendering / static generation
- * @see https://trpc.io/docs/client/nextjs/server-side-helpers
+ * @link https://trpc.io/docs/v11/client/nextjs/server-side-helpers
  */
 export function createServerSideHelpers<TRouter extends AnyRouter>(
   opts: CreateServerSideHelpersOptions<TRouter>,
 ) {
   const queryClient = getQueryClient(opts);
+  const transformer = getTransformer(
+    (opts as CoercedTransformerParameters).transformer,
+  );
 
   const resolvedOpts: {
     serialize: (obj: unknown) => any;
     query: (queryOpts: { path: string; input: unknown }) => Promise<unknown>;
   } = (() => {
     if ('router' in opts) {
-      const { transformer, ctx, router } = opts;
+      const { ctx, router } = opts;
       return {
-        serialize: transformer
-          ? ('input' in transformer ? transformer.input : transformer).serialize
-          : (obj) => obj,
+        serialize: transformer.output.serialize,
         query: (queryOpts) => {
           return callProcedure({
             procedures: router._def.procedures,
@@ -160,14 +161,12 @@ export function createServerSideHelpers<TRouter extends AnyRouter>(
 
     const { client } = opts;
     const untypedClient =
-      client instanceof TRPCUntypedClient
-        ? client
-        : getUntypedClient(client as any);
+      client instanceof TRPCUntypedClient ? client : getUntypedClient(client);
 
     return {
       query: (queryOpts) =>
         untypedClient.query(queryOpts.path, queryOpts.input),
-      serialize: (obj) => untypedClient.runtime.transformer.serialize(obj),
+      serialize: (obj) => transformer.output.serialize(obj),
     };
   })();
 
@@ -189,7 +188,10 @@ export function createServerSideHelpers<TRouter extends AnyRouter>(
       queryClient: QueryClient;
       dehydrate: (opts?: DehydrateOptions) => DehydratedState;
     },
-    DecoratedProcedureSSGRecord<TRouter>
+    DecoratedProcedureSSGRecord<
+      TRouter['_def']['_config']['$types'],
+      TRouter['_def']['record']
+    >
   >;
 
   return createFlatProxy<CreateSSGHelpers>((key) => {