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

package/src/internals/context.tsx

@@ -6,40 +6,53 @@ import {
   InvalidateOptions,
   InvalidateQueryFilters,
   QueryClient,
+  QueryFilters,
   RefetchOptions,
   RefetchQueryFilters,
   ResetOptions,
-  ResetQueryFilters,
   SetDataOptions,
   Updater,
 } from '@tanstack/react-query';
 import {
-  CreateTRPCProxyClient,
-  TRPCClient,
+  CreateTRPCClient,
   TRPCClientError,
   TRPCRequestOptions,
+  TRPCUntypedClient,
 } from '@trpc/client';
-import type { AnyRouter } from '@trpc/server';
-import { inferHandlerInput, inferProcedureInput } from '@trpc/server';
-import { inferTransformedProcedureOutput } from '@trpc/server/shared';
+import type { AnyRouter, DistributiveOmit } from '@trpc/server';
 import { createContext } from 'react';
-
-export interface TRPCFetchQueryOptions<TInput, TError, TOutput>
-  extends FetchQueryOptions<TInput, TError, TOutput>,
-    TRPCRequestOptions {}
-
-export interface TRPCFetchInfiniteQueryOptions<TInput, TError, TOutput>
-  extends FetchInfiniteQueryOptions<TInput, TError, TOutput>,
-    TRPCRequestOptions {}
+import { ExtractCursorType } from '../shared';
+import { TRPCQueryKey } from './getQueryKey';
+
+export type TRPCFetchQueryOptions<TOutput, TError> = DistributiveOmit<
+  FetchQueryOptions<TOutput, TError>,
+  'queryKey'
+> &
+  TRPCRequestOptions;
+
+export type TRPCFetchInfiniteQueryOptions<TInput, TOutput, TError> =
+  DistributiveOmit<
+    FetchInfiniteQueryOptions<
+      TOutput,
+      TError,
+      TOutput,
+      TRPCQueryKey,
+      ExtractCursorType<TInput>
+    >,
+    'queryKey' | 'initialPageParam'
+  > &
+    TRPCRequestOptions & {
+      initialCursor?: ExtractCursorType<TInput>;
+    };
 
 /** @internal */
 export type SSRState = 'mounted' | 'mounting' | 'prepass' | false;
 
-export interface ProxyTRPCContextProps<TRouter extends AnyRouter, TSSRContext> {
+export interface TRPCContextPropsBase<TRouter extends AnyRouter, TSSRContext> {
   /**
    * The `TRPCClient`
    */
-  client: TRPCClient<TRouter>;
+  client: TRPCUntypedClient<TRouter>;
   /**
    * The SSR context when server-side rendering
    * @default null
@@ -65,230 +78,146 @@ export interface ProxyTRPCContextProps<TRouter extends AnyRouter, TSSRContext> {
 /**
  * @internal
  */
-export type DecoratedProxyTRPCContextProps<
+export type DecoratedTRPCContextProps<
   TRouter extends AnyRouter,
   TSSRContext,
-> = ProxyTRPCContextProps<TRouter, TSSRContext> & {
-  client: CreateTRPCProxyClient<TRouter>;
+> = TRPCContextPropsBase<TRouter, TSSRContext> & {
+  client: CreateTRPCClient<TRouter>;
 };
 
 export interface TRPCContextProps<TRouter extends AnyRouter, TSSRContext>
-  extends ProxyTRPCContextProps<TRouter, TSSRContext> {
+  extends TRPCContextPropsBase<TRouter, TSSRContext> {
   /**
    * The react-query `QueryClient`
    */
   queryClient: QueryClient;
 }
 
-export const contextProps: (keyof ProxyTRPCContextProps<any, any>)[] = [
+export const contextProps: (keyof TRPCContextPropsBase<any, any>)[] = [
   'client',
   'ssrContext',
   'ssrState',
   'abortOnUnmount',
 ];
 
-/** @internal */
-type TRPCContextResetQueries<TRouter extends AnyRouter> =
-  /**
-   * @link https://tanstack.com/query/v4/docs/react/reference/QueryClient#queryclientresetqueries
-   */
-  ((filters?: ResetQueryFilters, options?: ResetOptions) => Promise<void>) &
-    (<
-      TPath extends string & keyof TRouter['_def']['queries'],
-      TInput extends inferProcedureInput<TRouter['_def']['queries'][TPath]>,
-    >(
-      pathAndInput?: TPath | [TPath, TInput?],
-      filters?: ResetQueryFilters,
-      options?: ResetOptions,
-    ) => Promise<void>);
-
 /**
- * @deprecated
  * @internal
- **/
+ */
 export interface TRPCContextState<
   TRouter extends AnyRouter,
   TSSRContext = undefined,
 > extends Required<TRPCContextProps<TRouter, TSSRContext>> {
   /**
-   * @link https://tanstack.com/query/v4/docs/reference/QueryClient#queryclientfetchquery
+   * @link https://tanstack.com/query/v5/docs/reference/QueryClient#queryclientfetchquery
    */
-  fetchQuery: <
-    TPath extends string & keyof TRouter['_def']['queries'],
-    TProcedure extends TRouter['_def']['queries'][TPath],
-    TOutput extends inferTransformedProcedureOutput<TProcedure>,
-    TInput extends inferProcedureInput<TProcedure>,
-  >(
-    pathAndInput: [path: TPath, ...args: inferHandlerInput<TProcedure>],
-    opts?: TRPCFetchQueryOptions<TInput, TRPCClientError<TProcedure>, TOutput>,
-  ) => Promise<TOutput>;
-
+  fetchQuery: (
+    queryKey: TRPCQueryKey,
+    opts?: TRPCFetchQueryOptions<unknown, TRPCClientError<TRouter>>,
+  ) => Promise<unknown>;
   /**
-   * @link https://tanstack.com/query/v4/docs/reference/QueryClient#queryclientfetchinfinitequery
+   * @link https://tanstack.com/query/v5/docs/reference/QueryClient#queryclientfetchinfinitequery
    */
-  fetchInfiniteQuery: <
-    TPath extends string & keyof TRouter['_def']['queries'],
-    TProcedure extends TRouter['_def']['queries'][TPath],
-    TOutput extends inferTransformedProcedureOutput<TProcedure>,
-    TInput extends inferProcedureInput<TProcedure>,
-  >(
-    pathAndInput: [path: TPath, ...args: inferHandlerInput<TProcedure>],
+  fetchInfiniteQuery: (
+    queryKey: TRPCQueryKey,
     opts?: TRPCFetchInfiniteQueryOptions<
-      TInput,
-      TRPCClientError<TProcedure>,
-      TOutput
+      unknown,
+      unknown,
+      TRPCClientError<TRouter>
     >,
-  ) => Promise<InfiniteData<TOutput>>;
-
+  ) => Promise<InfiniteData<unknown, unknown>>;
   /**
-   * @link https://tanstack.com/query/v4/docs/react/guides/prefetching
+   * @link https://tanstack.com/query/v5/docs/react/guides/prefetching
    */
-  prefetchQuery: <
-    TPath extends string & keyof TRouter['_def']['queries'],
-    TProcedure extends TRouter['_def']['queries'][TPath],
-    TOutput extends inferTransformedProcedureOutput<TProcedure>,
-    TInput extends inferProcedureInput<TProcedure>,
-  >(
-    pathAndInput: [path: TPath, ...args: inferHandlerInput<TProcedure>],
-    opts?: TRPCFetchQueryOptions<TInput, TRPCClientError<TProcedure>, TOutput>,
+  prefetchQuery: (
+    queryKey: TRPCQueryKey,
+    opts?: TRPCFetchQueryOptions<unknown, TRPCClientError<TRouter>>,
   ) => Promise<void>;
 
   /**
-   * @link https://tanstack.com/query/v4/docs/reference/QueryClient#queryclientprefetchinfinitequery
+   * @link https://tanstack.com/query/v5/docs/reference/QueryClient#queryclientprefetchinfinitequery
    */
-  prefetchInfiniteQuery: <
-    TPath extends string & keyof TRouter['_def']['queries'],
-    TProcedure extends TRouter['_def']['queries'][TPath],
-    TOutput extends inferTransformedProcedureOutput<TProcedure>,
-    TInput extends inferProcedureInput<TProcedure>,
-  >(
-    pathAndInput: [path: TPath, ...args: inferHandlerInput<TProcedure>],
+  prefetchInfiniteQuery: (
+    queryKey: TRPCQueryKey,
     opts?: TRPCFetchInfiniteQueryOptions<
-      TInput,
-      TRPCClientError<TProcedure>,
-      TOutput
+      unknown,
+      unknown,
+      TRPCClientError<TRouter>
     >,
   ) => Promise<void>;
 
   /**
-   * @link https://tanstack.com/query/v4/docs/react/reference/QueryClient#queryclientensurequerydata
+   * @link https://tanstack.com/query/v5/docs/react/reference/QueryClient#queryclientensurequerydata
    */
-  ensureQueryData: <
-    TPath extends string & keyof TRouter['_def']['queries'],
-    TProcedure extends TRouter['_def']['queries'][TPath],
-    TOutput extends inferTransformedProcedureOutput<TProcedure>,
-    TInput extends inferProcedureInput<TProcedure>,
-  >(
-    pathAndInput: [path: TPath, ...args: inferHandlerInput<TProcedure>],
-    opts?: TRPCFetchQueryOptions<TInput, TRPCClientError<TProcedure>, TOutput>,
-  ) => Promise<TOutput>;
+  ensureQueryData: (
+    queryKey: TRPCQueryKey,
+    opts?: TRPCFetchQueryOptions<unknown, TRPCClientError<TRouter>>,
+  ) => Promise<unknown>;
 
   /**
-   * @link https://tanstack.com/query/v4/docs/react/guides/query-invalidation
+   * @link https://tanstack.com/query/v5/docs/react/guides/query-invalidation
    */
-  invalidateQueries: <
-    TPath extends string & keyof TRouter['_def']['queries'],
-    TInput extends inferProcedureInput<TRouter['_def']['queries'][TPath]>,
-  >(
-    pathAndInput?: TPath | [TPath, TInput?],
+  invalidateQueries: (
+    queryKey: TRPCQueryKey,
     filters?: InvalidateQueryFilters,
     options?: InvalidateOptions,
   ) => Promise<void>;
 
   /**
-   * @link https://tanstack.com/query/v4/docs/react/reference/QueryClient#queryclientresetqueries
+   * @link https://tanstack.com/query/v5/docs/react/reference/QueryClient#queryclientresetqueries
    */
-  resetQueries: TRPCContextResetQueries<TRouter>;
-
-  /**
-   * @link https://tanstack.com/query/v4/docs/react/reference/QueryClient#queryclientrefetchqueries
-   */
-  refetchQueries<
-    TPath extends string & keyof TRouter['_def']['queries'],
-    TInput extends inferProcedureInput<TRouter['_def']['queries'][TPath]>,
-  >(
-    pathAndInput: [TPath, TInput?],
-    filters?: RefetchQueryFilters,
-    options?: RefetchOptions,
-  ): Promise<void>;
+  resetQueries: (
+    queryKey: TRPCQueryKey,
+    filters?: QueryFilters,
+    options?: ResetOptions,
+  ) => Promise<void>;
 
   /**
-   * @link https://tanstack.com/query/v4/docs/react/reference/QueryClient#queryclientrefetchqueries
+   * @link https://tanstack.com/query/v5/docs/react/reference/QueryClient#queryclientrefetchqueries
    */
-  refetchQueries(
+  refetchQueries: (
+    queryKey: TRPCQueryKey,
     filters?: RefetchQueryFilters,
     options?: RefetchOptions,
-  ): Promise<void>;
+  ) => Promise<void>;
 
   /**
-   * @link https://tanstack.com/query/v4/docs/react/guides/query-cancellation
+   * @link https://tanstack.com/query/v5/docs/react/guides/query-cancellation
    */
-  cancelQuery: <
-    TPath extends string & keyof TRouter['_def']['queries'],
-    TInput extends inferProcedureInput<TRouter['_def']['queries'][TPath]>,
-  >(
-    pathAndInput: [TPath, TInput?],
+  cancelQuery: (
+    queryKey: TRPCQueryKey,
     options?: CancelOptions,
   ) => Promise<void>;
 
   /**
-   * @link https://tanstack.com/query/v4/docs/react/reference/QueryClient#queryclientsetquerydata
+   * @link https://tanstack.com/query/v5/docs/react/reference/QueryClient#queryclientsetquerydata
    */
-  setQueryData: <
-    TPath extends string & keyof TRouter['_def']['queries'],
-    TInput extends inferProcedureInput<TRouter['_def']['queries'][TPath]>,
-    TOutput extends inferTransformedProcedureOutput<
-      TRouter['_def']['queries'][TPath]
-    >,
-  >(
-    pathAndInput: [TPath, TInput?],
-    updater: Updater<TOutput | undefined, TOutput | undefined>,
+  setQueryData: (
+    queryKey: TRPCQueryKey,
+    updater: Updater<unknown, unknown>,
     options?: SetDataOptions,
   ) => void;
 
   /**
-   * @link https://tanstack.com/query/v4/docs/react/reference/QueryClient#queryclientgetquerydata
+   * @link https://tanstack.com/query/v5/docs/react/reference/QueryClient#queryclientgetquerydata
    */
-  getQueryData: <
-    TPath extends string & keyof TRouter['_def']['queries'],
-    TInput extends inferProcedureInput<TRouter['_def']['queries'][TPath]>,
-    TOutput extends inferTransformedProcedureOutput<
-      TRouter['_def']['queries'][TPath]
-    >,
-  >(
-    pathAndInput: [TPath, TInput?],
-  ) => TOutput | undefined;
-
+  getQueryData: (queryKey: TRPCQueryKey) => unknown;
   /**
-   * @link https://tanstack.com/query/v4/docs/react/reference/QueryClient#queryclientsetquerydata
+   * @link https://tanstack.com/query/v5/docs/react/reference/QueryClient#queryclientsetquerydata
    */
-  setInfiniteQueryData: <
-    TPath extends string & keyof TRouter['_def']['queries'],
-    TInput extends inferProcedureInput<TRouter['_def']['queries'][TPath]>,
-    TOutput extends inferTransformedProcedureOutput<
-      TRouter['_def']['queries'][TPath]
-    >,
-  >(
-    pathAndInput: [TPath, TInput?],
+  setInfiniteQueryData: (
+    queryKey: TRPCQueryKey,
     updater: Updater<
-      InfiniteData<TOutput> | undefined,
-      InfiniteData<TOutput> | undefined
+      InfiniteData<unknown> | undefined,
+      InfiniteData<unknown> | undefined
     >,
     options?: SetDataOptions,
   ) => void;
 
   /**
-   * @link https://tanstack.com/query/v4/docs/react/reference/QueryClient#queryclientgetquerydata
+   * @link https://tanstack.com/query/v5/docs/react/reference/QueryClient#queryclientgetquerydata
    */
-  getInfiniteQueryData: <
-    TPath extends string & keyof TRouter['_def']['queries'],
-    TInput extends inferProcedureInput<TRouter['_def']['queries'][TPath]>,
-    TOutput extends inferTransformedProcedureOutput<
-      TRouter['_def']['queries'][TPath]
-    >,
-  >(
-    pathAndInput: [TPath, TInput?],
-  ) => InfiniteData<TOutput> | undefined;
+  getInfiniteQueryData: (
+    queryKey: TRPCQueryKey,
+  ) => InfiniteData<unknown> | undefined;
 }
-
 export const TRPCContext = createContext(null as any);

package/src/internals/getClientArgs.ts

@@ -1,7 +1,12 @@
-export function getClientArgs<TPathAndInput extends unknown[], TOptions>(
-  pathAndInput: TPathAndInput,
+import { TRPCQueryKey } from './getQueryKey';
+
+export function getClientArgs<TOptions>(
+  queryKey: TRPCQueryKey,
   opts: TOptions,
+  pageParam?: any,
 ) {
-  const [path, input] = pathAndInput;
-  return [path, input, (opts as any)?.trpc] as const;
+  const path = queryKey[0];
+  const input = queryKey[1]?.input;
+  if (pageParam) (input as any).cursor = pageParam;
+  return [path.join('.'), input, (opts as any)?.trpc] as const;
 }

package/src/internals/getQueryKey.ts

@@ -1,23 +1,48 @@
 import {
   AnyMutationProcedure,
   AnyQueryProcedure,
+  AnyRootConfig,
   AnyRouter,
   DeepPartial,
   inferProcedureInput,
 } from '@trpc/server';
-import { getArrayQueryKey, QueryType } from '../internals/getArrayQueryKey';
 import { DecoratedProcedureRecord, DecorateProcedure } from '../shared';
 
+export type QueryType = 'any' | 'infinite' | 'query';
+
+export type TRPCQueryKey = [
+  string[],
+  { input?: unknown; type?: Exclude<QueryType, 'any'> }?,
+];
+
 /**
- * We treat `undefined` as an input the same as omitting an `input`
- * https://github.com/trpc/trpc/issues/2290
- */
+ * 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
+ * storing in tanstack query.
+ **/
 export function getQueryKeyInternal(
-  path: string,
+  path: string[],
   input: unknown,
-): [string, unknown] | [string] {
-  if (path.length) return input === undefined ? [path] : [path, input];
-  return [] as unknown as [string];
+  type: QueryType,
+): TRPCQueryKey {
+  // Construct a query key that is easy to destructure and flexible for
+  // partial selecting etc.
+  // https://github.com/trpc/trpc/issues/3128
+
+  // some parts of the path may be dot-separated, split them up
+  const splitPath = path.flatMap((part) => part.split('.'));
+
+  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);
+  return [
+    splitPath,
+    {
+      ...(typeof input !== 'undefined' && { input: input }),
+      ...(type && type !== 'any' && { type: type }),
+    },
+  ];
 }
 
 type GetInfiniteQueryInput<
@@ -42,35 +67,37 @@ type GetQueryParams<
   : [input?: GetQueryProcedureInput<TProcedureInput>, type?: QueryType];
 
 type GetParams<
+  TConfig extends AnyRootConfig,
   TProcedureOrRouter extends
     | AnyMutationProcedure
     | AnyQueryProcedure
     | AnyRouter,
-  TPath extends string,
   TFlags,
 > = TProcedureOrRouter extends AnyQueryProcedure
   ? [
-      procedureOrRouter: DecorateProcedure<TProcedureOrRouter, TFlags, TPath>,
+      procedureOrRouter: DecorateProcedure<TConfig, TProcedureOrRouter, TFlags>,
       ..._params: GetQueryParams<TProcedureOrRouter>,
     ]
   : TProcedureOrRouter extends AnyMutationProcedure
-  ? [procedureOrRouter: DecorateProcedure<TProcedureOrRouter, TFlags, TPath>]
-  : [
+  ? [procedureOrRouter: DecorateProcedure<TConfig, TProcedureOrRouter, TFlags>]
+  : TProcedureOrRouter extends AnyRouter
+  ? [
       procedureOrRouter: DecoratedProcedureRecord<
+        TConfig,
         TProcedureOrRouter['_def']['record'],
-        TFlags,
-        any
+        TFlags
       >,
-    ];
+    ]
+  : never;
 
 type GetQueryKeyParams<
+  TConfig extends AnyRootConfig,
   TProcedureOrRouter extends
     | AnyMutationProcedure
     | AnyQueryProcedure
     | AnyRouter,
-  TPath extends string,
   TFlags,
-> = GetParams<TProcedureOrRouter, TPath, TFlags>;
+> = GetParams<TConfig, TProcedureOrRouter, TFlags>;
 
 /**
  * Method to extract the query key for a procedure
@@ -80,20 +107,22 @@ type GetQueryKeyParams<
  * @link https://trpc.io/docs/getQueryKey
  */
 export function getQueryKey<
+  TConfig extends AnyRootConfig,
   TProcedureOrRouter extends
     | AnyMutationProcedure
     | AnyQueryProcedure
     | AnyRouter,
-  TPath extends string,
   TFlags,
->(..._params: GetQueryKeyParams<TProcedureOrRouter, TPath, TFlags>) {
+>(..._params: GetQueryKeyParams<TConfig, TProcedureOrRouter, TFlags>) {
   const [procedureOrRouter, input, type] = _params;
   // @ts-expect-error - we don't expose _def on the type layer
   const path = procedureOrRouter._def().path as string[];
-  const dotPath = path.join('.');
-  const queryKey = getArrayQueryKey(
-    getQueryKeyInternal(dotPath, input),
-    type ?? 'any',
-  );
+  const queryKey = getQueryKeyInternal(path, input, type ?? 'any');
   return queryKey;
 }
+
+// TODO: look over if we can't use a single type
+export type QueryKeyKnown<TInput, TType extends Exclude<QueryType, 'any'>> = [
+  string[],
+  { input?: GetQueryProcedureInput<TInput>; type: TType }?,
+];

package/src/internals/useQueries.ts

@@ -1,5 +1,5 @@
 import { QueryKey, UseQueryOptions } from '@tanstack/react-query';
-import { AnyRouter } from '@trpc/server';
+import { AnyRouter, DistributiveOmit } from '@trpc/server';
 import {
   UseQueriesProcedureRecord,
   UseTRPCQueryOptions,
@@ -14,18 +14,16 @@ export type UseQueryOptionsForUseQueries<
   TError = unknown,
   TData = TQueryFnData,
   TQueryKey extends QueryKey = QueryKey,
-> = Omit<UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>, 'context'>;
+> = DistributiveOmit<
+  UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
+  'queryKey'
+>;
 
 /**
  * @internal
  */
-export type TrpcQueryOptionsForUseQueries<
-  TPath,
-  TInput,
-  TOutput,
-  TData,
-  TError,
-> = Omit<UseTRPCQueryOptions<TPath, TInput, TOutput, TData, TError>, 'context'>;
+export type TrpcQueryOptionsForUseQueries<TOutput, TData, TError> =
+  DistributiveOmit<UseTRPCQueryOptions<TOutput, TData, TError>, 'queryKey'>;
 
 /**
  * @internal
@@ -80,5 +78,4 @@ export type TRPCUseQueries<TRouter extends AnyRouter> = <
   queriesCallback: (
     t: UseQueriesProcedureRecord<TRouter>,
   ) => readonly [...QueriesOptions<TQueryOptions>],
-  context?: UseQueryOptions['context'],
 ) => QueriesResults<TQueryOptions>;

package/src/server/index.ts

@@ -1,9 +1 @@
 export { createServerSideHelpers } from './ssgProxy';
-export type {
-  /**
-   * @deprecated this exported is planned to be removed in the next major version
-   */
-  CreateServerSideHelpersOptions as CreateSSGHelpersOptions,
-} from './types';
-
-export type { DecoratedProcedureSSGRecord } from './ssgProxy';