@trpc/react-query 11.0.0-alpha-tmp-subscription-connection-state.488 → 11.0.0-alpha-tmp-12-06-react.665

package/src/internals/context.tsx

@@ -22,18 +22,35 @@ import type {
   TRPCUntypedClient,
 } from '@trpc/client';
 import type {
+  AnyClientTypes,
   AnyRouter,
   DistributiveOmit,
 } from '@trpc/server/unstable-core-do-not-import';
 import * as React from 'react';
-import type { ExtractCursorType } from '../shared';
+import type {
+  DefinedTRPCInfiniteQueryOptionsIn,
+  DefinedTRPCInfiniteQueryOptionsOut,
+  DefinedTRPCQueryOptionsIn,
+  DefinedTRPCQueryOptionsOut,
+  ExtractCursorType,
+  UndefinedTRPCInfiniteQueryOptionsIn,
+  UndefinedTRPCInfiniteQueryOptionsOut,
+  UndefinedTRPCQueryOptionsIn,
+  UndefinedTRPCQueryOptionsOut,
+} from '../shared';
 import type { TRPCMutationKey, TRPCQueryKey } from './getQueryKey';
 
-export type TRPCFetchQueryOptions<TOutput, TError> = DistributiveOmit<
-  FetchQueryOptions<TOutput, TError>,
-  'queryKey'
-> &
-  TRPCRequestOptions;
+interface TRPCUseUtilsOptions {
+  /**
+   * tRPC-related options
+   */
+  trpc?: TRPCRequestOptions;
+}
+export interface TRPCFetchQueryOptions<TOutput, TError>
+  extends DistributiveOmit<FetchQueryOptions<TOutput, TError>, 'queryKey'>,
+    TRPCUseUtilsOptions {
+  //
+}
 
 export type TRPCFetchInfiniteQueryOptions<TInput, TOutput, TError> =
   DistributiveOmit<
@@ -46,7 +63,7 @@ export type TRPCFetchInfiniteQueryOptions<TInput, TOutput, TError> =
     >,
     'queryKey' | 'initialPageParam'
   > &
-    TRPCRequestOptions & {
+    TRPCUseUtilsOptions & {
       initialCursor?: ExtractCursorType<TInput>;
     };
 
@@ -119,14 +136,78 @@ export interface TRPCContextState<
  */
 export interface TRPCQueryUtils<TRouter extends AnyRouter> {
   /**
-   * @link https://tanstack.com/query/v5/docs/reference/QueryClient#queryclientfetchquery
+   * @see https://tanstack.com/query/latest/docs/framework/react/reference/queryOptions#queryoptions
+   */
+  queryOptions(
+    path: readonly string[], // <-- look into if needed
+    queryKey: TRPCQueryKey,
+    opts?: UndefinedTRPCQueryOptionsIn<
+      unknown,
+      unknown,
+      TRPCClientError<AnyClientTypes>
+    >,
+  ): UndefinedTRPCQueryOptionsOut<
+    unknown,
+    unknown,
+    TRPCClientError<AnyClientTypes>
+  >;
+  queryOptions(
+    path: readonly string[], // <-- look into if needed
+    queryKey: TRPCQueryKey,
+    opts: DefinedTRPCQueryOptionsIn<
+      unknown,
+      unknown,
+      TRPCClientError<AnyClientTypes>
+    >,
+  ): DefinedTRPCQueryOptionsOut<
+    unknown,
+    unknown,
+    TRPCClientError<AnyClientTypes>
+  >;
+
+  /**
+   * @see https://tanstack.com/query/latest/docs/framework/react/reference/infiniteQueryOptions#infinitequeryoptions
+   */
+  infiniteQueryOptions(
+    path: readonly string[], // <-- look into if needed
+    queryKey: TRPCQueryKey,
+    opts: UndefinedTRPCInfiniteQueryOptionsIn<
+      unknown,
+      unknown,
+      unknown,
+      TRPCClientError<AnyClientTypes>
+    >,
+  ): UndefinedTRPCInfiniteQueryOptionsOut<
+    unknown,
+    unknown,
+    unknown,
+    TRPCClientError<AnyClientTypes>
+  >;
+  infiniteQueryOptions(
+    path: readonly string[], // <-- look into if needed
+    queryKey: TRPCQueryKey,
+    opts: DefinedTRPCInfiniteQueryOptionsIn<
+      unknown,
+      unknown,
+      unknown,
+      TRPCClientError<AnyClientTypes>
+    >,
+  ): DefinedTRPCInfiniteQueryOptionsOut<
+    unknown,
+    unknown,
+    unknown,
+    TRPCClientError<AnyClientTypes>
+  >;
+
+  /**
+   * @see https://tanstack.com/query/v5/docs/reference/QueryClient#queryclientfetchquery
    */
   fetchQuery: (
     queryKey: TRPCQueryKey,
     opts?: TRPCFetchQueryOptions<unknown, TRPCClientError<TRouter>>,
   ) => Promise<unknown>;
   /**
-   * @link https://tanstack.com/query/v5/docs/reference/QueryClient#queryclientfetchinfinitequery
+   * @see https://tanstack.com/query/v5/docs/reference/QueryClient#queryclientfetchinfinitequery
    */
   fetchInfiniteQuery: (
     queryKey: TRPCQueryKey,
@@ -137,7 +218,7 @@ export interface TRPCQueryUtils<TRouter extends AnyRouter> {
     >,
   ) => Promise<InfiniteData<unknown, unknown>>;
   /**
-   * @link https://tanstack.com/query/v5/docs/framework/react/guides/prefetching
+   * @see https://tanstack.com/query/v5/docs/framework/react/guides/prefetching
    */
   prefetchQuery: (
     queryKey: TRPCQueryKey,
@@ -145,7 +226,7 @@ export interface TRPCQueryUtils<TRouter extends AnyRouter> {
   ) => Promise<void>;
 
   /**
-   * @link https://tanstack.com/query/v5/docs/reference/QueryClient#queryclientprefetchinfinitequery
+   * @see https://tanstack.com/query/v5/docs/reference/QueryClient#queryclientprefetchinfinitequery
    */
   prefetchInfiniteQuery: (
     queryKey: TRPCQueryKey,
@@ -157,7 +238,7 @@ export interface TRPCQueryUtils<TRouter extends AnyRouter> {
   ) => Promise<void>;
 
   /**
-   * @link https://tanstack.com/query/v5/docs/reference/QueryClient#queryclientensurequerydata
+   * @see https://tanstack.com/query/v5/docs/reference/QueryClient#queryclientensurequerydata
    */
   ensureQueryData: (
     queryKey: TRPCQueryKey,
@@ -165,7 +246,7 @@ export interface TRPCQueryUtils<TRouter extends AnyRouter> {
   ) => Promise<unknown>;
 
   /**
-   * @link https://tanstack.com/query/v5/docs/framework/react/guides/query-invalidation
+   * @see https://tanstack.com/query/v5/docs/framework/react/guides/query-invalidation
    */
   invalidateQueries: (
     queryKey: TRPCQueryKey,
@@ -174,7 +255,7 @@ export interface TRPCQueryUtils<TRouter extends AnyRouter> {
   ) => Promise<void>;
 
   /**
-   * @link https://tanstack.com/query/v5/docs/reference/QueryClient#queryclientresetqueries
+   * @see https://tanstack.com/query/v5/docs/reference/QueryClient#queryclientresetqueries
    */
   resetQueries: (
     queryKey: TRPCQueryKey,
@@ -183,7 +264,7 @@ export interface TRPCQueryUtils<TRouter extends AnyRouter> {
   ) => Promise<void>;
 
   /**
-   * @link https://tanstack.com/query/v5/docs/reference/QueryClient#queryclientrefetchqueries
+   * @see https://tanstack.com/query/v5/docs/reference/QueryClient#queryclientrefetchqueries
    */
   refetchQueries: (
     queryKey: TRPCQueryKey,
@@ -192,7 +273,7 @@ export interface TRPCQueryUtils<TRouter extends AnyRouter> {
   ) => Promise<void>;
 
   /**
-   * @link https://tanstack.com/query/v5/docs/framework/react/guides/query-cancellation
+   * @see https://tanstack.com/query/v5/docs/framework/react/guides/query-cancellation
    */
   cancelQuery: (
     queryKey: TRPCQueryKey,
@@ -200,7 +281,7 @@ export interface TRPCQueryUtils<TRouter extends AnyRouter> {
   ) => Promise<void>;
 
   /**
-   * @link https://tanstack.com/query/v5/docs/reference/QueryClient#queryclientsetquerydata
+   * @see https://tanstack.com/query/v5/docs/reference/QueryClient#queryclientsetquerydata
    */
   setQueryData: (
     queryKey: TRPCQueryKey,
@@ -209,7 +290,7 @@ export interface TRPCQueryUtils<TRouter extends AnyRouter> {
   ) => void;
 
   /**
-   * @link https://tanstack.com/query/v5/docs/reference/QueryClient#queryclientsetqueriesdata
+   * @see https://tanstack.com/query/v5/docs/reference/QueryClient#queryclientsetqueriesdata
    */
   setQueriesData: (
     queryKey: TRPCQueryKey,
@@ -219,12 +300,12 @@ export interface TRPCQueryUtils<TRouter extends AnyRouter> {
   ) => [QueryKey, unknown][];
 
   /**
-   * @link https://tanstack.com/query/v5/docs/reference/QueryClient#queryclientgetquerydata
+   * @see https://tanstack.com/query/v5/docs/reference/QueryClient#queryclientgetquerydata
    */
   getQueryData: (queryKey: TRPCQueryKey) => unknown;
 
   /**
-   * @link https://tanstack.com/query/v5/docs/reference/QueryClient#queryclientsetquerydata
+   * @see https://tanstack.com/query/v5/docs/reference/QueryClient#queryclientsetquerydata
    */
   setInfiniteQueryData: (
     queryKey: TRPCQueryKey,
@@ -236,14 +317,14 @@ export interface TRPCQueryUtils<TRouter extends AnyRouter> {
   ) => void;
 
   /**
-   * @link https://tanstack.com/query/v5/docs/reference/QueryClient#queryclientgetquerydata
+   * @see https://tanstack.com/query/v5/docs/reference/QueryClient#queryclientgetquerydata
    */
   getInfiniteQueryData: (
     queryKey: TRPCQueryKey,
   ) => InfiniteData<unknown> | undefined;
 
   /**
-   * @link https://tanstack.com/query/latest/docs/reference/QueryClient/#queryclientsetmutationdefaults
+   * @see https://tanstack.com/query/latest/docs/reference/QueryClient/#queryclientsetmutationdefaults
    */
   setMutationDefaults: (
     mutationKey: TRPCMutationKey,
@@ -255,14 +336,14 @@ export interface TRPCQueryUtils<TRouter extends AnyRouter> {
   ) => void;
 
   /**
-   * @link https://tanstack.com/query/latest/docs/reference/QueryClient#queryclientgetmutationdefaults
+   * @see https://tanstack.com/query/latest/docs/reference/QueryClient#queryclientgetmutationdefaults
    */
   getMutationDefaults: (
     mutationKey: TRPCMutationKey,
   ) => MutationOptions | undefined;
 
   /**
-   * @link https://tanstack.com/query/latest/docs/reference/QueryClient#queryclientismutating
+   * @see https://tanstack.com/query/latest/docs/reference/QueryClient#queryclientismutating
    */
   isMutating: (filters: { mutationKey: TRPCMutationKey }) => number;
 }

package/src/internals/getQueryKey.ts

@@ -104,7 +104,7 @@ type GetParams<TProcedureOrRouter extends ProcedureOrRouter> =
  * @param procedureOrRouter - procedure or AnyRouter
  * @param input - input to procedureOrRouter
  * @param type - defaults to `any`
- * @link https://trpc.io/docs/v11/getQueryKey
+ * @see https://trpc.io/docs/v11/getQueryKey
  */
 export function getQueryKey<TProcedureOrRouter extends ProcedureOrRouter>(
   procedureOrRouter: TProcedureOrRouter,
@@ -127,7 +127,7 @@ export type QueryKeyKnown<TInput, TType extends Exclude<QueryType, 'any'>> = [
 /**
  * Method to extract the mutation key for a procedure
  * @param procedure - procedure
- * @link https://trpc.io/docs/v11/getQueryKey#mutations
+ * @see https://trpc.io/docs/v11/getQueryKey#mutations
  */
 export function getMutationKey<TProcedure extends DecoratedMutation<any>>(
   procedure: TProcedure,

package/src/internals/trpcResult.ts

@@ -0,0 +1,55 @@
+import type { QueryClient } from '@tanstack/react-query';
+import * as React from 'react';
+import type { TRPCQueryOptionsResult } from '../shared';
+import type { TRPCHookResult } from '../shared/hooks/types';
+import type { TRPCQueryKey } from './getQueryKey';
+
+export function createTRPCOptionsResult(value: {
+  path: readonly string[];
+}): TRPCQueryOptionsResult['trpc'] {
+  const path = value.path.join('.');
+
+  return {
+    path,
+  };
+}
+
+/**
+ * Makes a stable reference of the `trpc` prop
+ */
+export function useHookResult(value: {
+  path: readonly string[];
+}): TRPCHookResult['trpc'] {
+  const result = createTRPCOptionsResult(value);
+  return React.useMemo(() => result, [result]);
+}
+
+/**
+ * @internal
+ */
+export async function buildQueryFromAsyncIterable(
+  asyncIterable: AsyncIterable<unknown>,
+  queryClient: QueryClient,
+  queryKey: TRPCQueryKey,
+) {
+  const queryCache = queryClient.getQueryCache();
+
+  const query = queryCache.build(queryClient, {
+    queryKey,
+  });
+
+  query.setState({
+    data: [],
+    status: 'success',
+  });
+
+  const aggregate: unknown[] = [];
+  for await (const value of asyncIterable) {
+    aggregate.push(value);
+
+    query.setState({
+      data: [...aggregate],
+    });
+  }
+  return aggregate;
+}

package/src/internals/useQueries.ts

@@ -125,19 +125,24 @@ export type QueriesOptions<
 > = TQueriesOptions extends []
   ? []
   : TQueriesOptions extends [infer Head]
-  ? [...TResult, GetOptions<Head>]
-  : TQueriesOptions extends [infer Head, ...infer Tail]
-  ? QueriesOptions<Tail, [...TResult, GetOptions<Head>]>
-  : unknown[] extends TQueriesOptions
-  ? TQueriesOptions
-  : TQueriesOptions extends UseQueryOptionsForUseQueries<
-      infer TQueryFnData,
-      infer TError,
-      infer TData,
-      infer TQueryKey
-    >[]
-  ? UseQueryOptionsForUseQueries<TQueryFnData, TError, TData, TQueryKey>[]
-  : UseQueryOptionsForUseQueries[];
+    ? [...TResult, GetOptions<Head>]
+    : TQueriesOptions extends [infer Head, ...infer Tail]
+      ? QueriesOptions<Tail, [...TResult, GetOptions<Head>]>
+      : unknown[] extends TQueriesOptions
+        ? TQueriesOptions
+        : TQueriesOptions extends UseQueryOptionsForUseQueries<
+              infer TQueryFnData,
+              infer TError,
+              infer TData,
+              infer TQueryKey
+            >[]
+          ? UseQueryOptionsForUseQueries<
+              TQueryFnData,
+              TError,
+              TData,
+              TQueryKey
+            >[]
+          : UseQueryOptionsForUseQueries[];
 
 type GetSuspenseOptions<TQueryOptions> =
   TQueryOptions extends UseQueryOptionsForUseSuspenseQueries<any, any, any, any>
@@ -153,24 +158,24 @@ export type SuspenseQueriesOptions<
 > = 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[];
+    ? [...TResult, GetSuspenseOptions<Head>]
+    : TQueriesOptions extends [infer Head, ...infer Tail]
+      ? SuspenseQueriesOptions<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

package/src/rsc.tsx

@@ -35,9 +35,9 @@ type DecorateProcedure<
   TRoot extends AnyRootTypes,
   TProcedure extends AnyProcedure,
 > = {
-  (input: inferProcedureInput<TProcedure>): Promise<
-    inferProcedureOutput<TProcedure>
-  >;
+  (
+    input: inferProcedureInput<TProcedure>,
+  ): Promise<inferProcedureOutput<TProcedure>>;
   prefetch: (
     input: inferProcedureInput<TProcedure>,
     opts?: TRPCFetchQueryOptions<
@@ -62,8 +62,8 @@ type DecorateRouterRecord<
   [TKey in keyof TRecord]: TRecord[TKey] extends AnyProcedure
     ? DecorateProcedure<TRoot, TRecord[TKey]>
     : TRecord[TKey] extends RouterRecord
-    ? DecorateRouterRecord<TRoot, TRecord[TKey]>
-    : never;
+      ? DecorateRouterRecord<TRoot, TRecord[TKey]>
+      : never;
 };
 
 type Caller<TRouter extends AnyRouter> = ReturnType<
@@ -73,7 +73,7 @@ type Caller<TRouter extends AnyRouter> = ReturnType<
 // ts-prune-ignore-next
 /**
  * @note This requires `@tanstack/react-query@^5.49.0`
- * @note Make sure to have `dehyrate.serializeData` and `hydrate.deserializeData`
+ * @note Make sure to have `dehydrate.serializeData` and `hydrate.deserializeData`
  * set to your data transformer in your `QueryClient` factory.
  * @example
  * ```ts

package/src/server/ssgProxy.ts

@@ -1,11 +1,10 @@
 import type {
   DehydratedState,
   DehydrateOptions,
-  InfiniteData,
   QueryClient,
 } from '@tanstack/react-query';
 import { dehydrate } from '@tanstack/react-query';
-import type { inferRouterClient, TRPCClientError } from '@trpc/client';
+import type { inferRouterClient } from '@trpc/client';
 import { getUntypedClient, TRPCUntypedClient } from '@trpc/client';
 import type { CoercedTransformerParameters } from '@trpc/client/unstable-internals';
 import {
@@ -13,14 +12,11 @@ import {
   type TransformerOptions,
 } from '@trpc/client/unstable-internals';
 import type {
-  AnyProcedure,
   AnyQueryProcedure,
   AnyRootTypes,
   AnyRouter,
   inferClientTypes,
-  inferProcedureInput,
   inferRouterContext,
-  inferTransformedProcedureOutput,
   Maybe,
   ProtectedIntersection,
   RouterRecord,
@@ -33,7 +29,7 @@ import {
 import { getQueryKeyInternal } from '../internals/getQueryKey';
 import type {
   CreateTRPCReactQueryClientConfig,
-  ExtractCursorType,
+  DecorateQueryProcedure,
   TRPCFetchInfiniteQueryOptions,
   TRPCFetchQueryOptions,
 } from '../shared';
@@ -52,61 +48,13 @@ type CreateServerSideHelpersOptions<TRouter extends AnyRouter> =
   CreateTRPCReactQueryClientConfig &
     (CreateSSGHelpersExternal<TRouter> | CreateSSGHelpersInternal<TRouter>);
 
-type DecorateProcedure<
-  TRoot extends AnyRootTypes,
-  TProcedure extends AnyProcedure,
-> = {
-  /**
-   * @link https://tanstack.com/query/v5/docs/framework/react/guides/prefetching
-   */
-  fetch(
-    input: inferProcedureInput<TProcedure>,
-    opts?: TRPCFetchQueryOptions<
-      inferTransformedProcedureOutput<TRoot, TProcedure>,
-      TRPCClientError<TRoot>
-    >,
-  ): Promise<inferTransformedProcedureOutput<TRoot, TProcedure>>;
-
-  /**
-   * @link https://tanstack.com/query/v5/docs/framework/react/guides/prefetching
-   */
-  fetchInfinite(
-    input: inferProcedureInput<TProcedure>,
-    opts?: TRPCFetchInfiniteQueryOptions<
-      inferProcedureInput<TProcedure>,
-      inferTransformedProcedureOutput<TRoot, TProcedure>,
-      TRPCClientError<TRoot>
-    >,
-  ): Promise<
-    InfiniteData<
-      inferTransformedProcedureOutput<TRoot, TProcedure>,
-      NonNullable<ExtractCursorType<inferProcedureInput<TProcedure>>> | null
-    >
-  >;
-
-  /**
-   * @link https://tanstack.com/query/v5/docs/framework/react/guides/prefetching
-   */
-  prefetch(
-    input: inferProcedureInput<TProcedure>,
-    opts?: TRPCFetchQueryOptions<
-      inferTransformedProcedureOutput<TRoot, TProcedure>,
-      TRPCClientError<TRoot>
-    >,
-  ): Promise<void>;
-
-  /**
-   * @link https://tanstack.com/query/v5/docs/framework/react/guides/prefetching
-   */
-  prefetchInfinite(
-    input: inferProcedureInput<TProcedure>,
-    opts?: TRPCFetchInfiniteQueryOptions<
-      inferProcedureInput<TProcedure>,
-      inferTransformedProcedureOutput<TRoot, TProcedure>,
-      TRPCClientError<TRoot>
-    >,
-  ): Promise<void>;
-};
+type SSGFns =
+  | 'queryOptions'
+  | 'infiniteQueryOptions'
+  | 'fetch'
+  | 'fetchInfinite'
+  | 'prefetch'
+  | 'prefetchInfinite';
 
 /**
  * @internal
@@ -119,17 +67,17 @@ type DecoratedProcedureSSGRecord<
     ? $Value extends RouterRecord
       ? DecoratedProcedureSSGRecord<TRoot, $Value>
       : // utils only apply to queries
-      $Value extends AnyQueryProcedure
-      ? DecorateProcedure<TRoot, $Value>
-      : never
+        $Value extends AnyQueryProcedure
+        ? Pick<DecorateQueryProcedure<TRoot, $Value>, SSGFns>
+        : never
     : never;
 };
 
-type AnyDecoratedProcedure = DecorateProcedure<any, any>;
+type AnyDecoratedProcedure = Pick<DecorateQueryProcedure<any, any>, SSGFns>;
 
 /**
  * Create functions you can use for server-side rendering / static generation
- * @link https://trpc.io/docs/v11/client/nextjs/server-side-helpers
+ * @see https://trpc.io/docs/v11/client/nextjs/server-side-helpers
  */
 export function createServerSideHelpers<TRouter extends AnyRouter>(
   opts: CreateServerSideHelpersOptions<TRouter>,
@@ -154,6 +102,7 @@ export function createServerSideHelpers<TRouter extends AnyRouter>(
             getRawInput: async () => queryOpts.input,
             ctx,
             type: 'query',
+            signal: undefined,
           });
         },
       };
@@ -209,6 +158,14 @@ export function createServerSideHelpers<TRouter extends AnyRouter>(
     );
 
     const helperMap: Record<keyof AnyDecoratedProcedure, () => unknown> = {
+      queryOptions: () => {
+        const args1 = args[1] as Maybe<any>;
+        return { ...args1, queryKey, queryFn };
+      },
+      infiniteQueryOptions: () => {
+        const args1 = args[1] as Maybe<any>;
+        return { ...args1, queryKey, queryFn };
+      },
       fetch: () => {
         const args1 = args[1] as Maybe<TRPCFetchQueryOptions<any, any>>;
         return queryClient.fetchQuery({ ...args1, queryKey, queryFn });