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

package/src/shared/proxy/utilsProxy.ts

@@ -13,6 +13,7 @@ import {
 import { createTRPCClientProxy, TRPCClientError } from '@trpc/client';
 import {
   AnyQueryProcedure,
+  AnyRootConfig,
   AnyRouter,
   DeepPartial,
   Filter,
@@ -26,77 +27,86 @@ import {
 } from '@trpc/server/shared';
 import {
   contextProps,
-  DecoratedProxyTRPCContextProps,
+  DecoratedTRPCContextProps,
   TRPCContextState,
   TRPCFetchInfiniteQueryOptions,
   TRPCFetchQueryOptions,
 } from '../../internals/context';
-import { QueryKeyKnown } from '../../internals/getArrayQueryKey';
-import { getQueryKeyInternal } from '../../internals/getQueryKey';
+import {
+  getQueryKeyInternal,
+  QueryKeyKnown,
+  QueryType,
+} from '../../internals/getQueryKey';
+import { ExtractCursorType } from '../hooks/types';
 
-type DecorateProcedure<TProcedure extends AnyQueryProcedure> = {
+type DecorateProcedure<
+  TConfig extends AnyRootConfig,
+  TProcedure extends AnyQueryProcedure,
+> = {
   /**
-   * @link https://tanstack.com/query/v4/docs/reference/QueryClient#queryclientfetchquery
+   * @link https://tanstack.com/query/v5/docs/reference/QueryClient#queryclientfetchquery
    */
   fetch(
     input: inferProcedureInput<TProcedure>,
     opts?: TRPCFetchQueryOptions<
-      inferProcedureInput<TProcedure>,
-      TRPCClientError<TProcedure>,
-      inferTransformedProcedureOutput<TProcedure>
+      inferTransformedProcedureOutput<TConfig, TProcedure>,
+      TRPCClientError<TConfig>
     >,
-  ): Promise<inferTransformedProcedureOutput<TProcedure>>;
+  ): Promise<inferTransformedProcedureOutput<TConfig, TProcedure>>;
 
   /**
-   * @link https://tanstack.com/query/v4/docs/reference/QueryClient#queryclientfetchinfinitequery
+   * @link https://tanstack.com/query/v5/docs/reference/QueryClient#queryclientfetchinfinitequery
    */
   fetchInfinite(
     input: inferProcedureInput<TProcedure>,
     opts?: TRPCFetchInfiniteQueryOptions<
       inferProcedureInput<TProcedure>,
-      TRPCClientError<TProcedure>,
-      inferTransformedProcedureOutput<TProcedure>
+      inferTransformedProcedureOutput<TConfig, TProcedure>,
+      TRPCClientError<TConfig>
     >,
-  ): Promise<InfiniteData<inferTransformedProcedureOutput<TProcedure>>>;
+  ): Promise<
+    InfiniteData<
+      inferTransformedProcedureOutput<TConfig, TProcedure>,
+      NonNullable<ExtractCursorType<inferProcedureInput<TProcedure>>> | null
+    >
+  >;
 
   /**
-   * @link https://tanstack.com/query/v4/docs/reference/QueryClient#queryclientprefetchquery
+   * @link https://tanstack.com/query/v5/docs/reference/QueryClient#queryclientprefetchquery
    */
   prefetch(
     input: inferProcedureInput<TProcedure>,
     opts?: TRPCFetchQueryOptions<
-      inferProcedureInput<TProcedure>,
-      TRPCClientError<TProcedure>,
-      inferTransformedProcedureOutput<TProcedure>
+      inferTransformedProcedureOutput<TConfig, TProcedure>,
+      TRPCClientError<TConfig>
     >,
   ): Promise<void>;
 
   /**
-   * @link https://tanstack.com/query/v4/docs/reference/QueryClient#queryclientprefetchinfinitequery
+   * @link https://tanstack.com/query/v5/docs/reference/QueryClient#queryclientprefetchinfinitequery
    */
   prefetchInfinite(
     input: inferProcedureInput<TProcedure>,
     opts?: TRPCFetchInfiniteQueryOptions<
       inferProcedureInput<TProcedure>,
-      TRPCClientError<TProcedure>,
-      inferTransformedProcedureOutput<TProcedure>
+      inferTransformedProcedureOutput<TConfig, TProcedure>,
+      TRPCClientError<TConfig>
     >,
   ): Promise<void>;
 
   /**
-   * @link https://tanstack.com/query/v4/docs/react/reference/QueryClient#queryclientensurequerydata
+   * @link https://tanstack.com/query/v5/docs/react/reference/QueryClient#queryclientensurequerydata
    */
   ensureData(
     input: inferProcedureInput<TProcedure>,
     opts?: TRPCFetchQueryOptions<
-      inferProcedureInput<TProcedure>,
-      TRPCClientError<TProcedure>,
-      inferTransformedProcedureOutput<TProcedure>
+      inferTransformedProcedureOutput<TConfig, TProcedure>,
+      TRPCClientError<TConfig>
     >,
-  ): Promise<inferTransformedProcedureOutput<TProcedure>>;
+  ): Promise<inferTransformedProcedureOutput<TConfig, TProcedure>>;
 
   /**
-   * @link https://tanstack.com/query/v4/docs/reference/QueryClient#queryclientinvalidatequeries
+   * @link https://tanstack.com/query/v5/docs/reference/QueryClient#queryclientinvalidatequeries
    */
   invalidate(
     input?: DeepPartial<inferProcedureInput<TProcedure>>,
@@ -104,7 +114,7 @@ type DecorateProcedure<TProcedure extends AnyQueryProcedure> = {
       predicate?: (
         query: Query<
           inferProcedureInput<TProcedure>,
-          TRPCClientError<TProcedure>,
+          TRPCClientError<TConfig>,
           inferProcedureInput<TProcedure>,
           QueryKeyKnown<
             inferProcedureInput<TProcedure>,
@@ -119,7 +129,7 @@ type DecorateProcedure<TProcedure extends AnyQueryProcedure> = {
   ): Promise<void>;
 
   /**
-   * @link https://tanstack.com/query/v4/docs/reference/QueryClient#queryclientrefetchqueries
+   * @link https://tanstack.com/query/v5/docs/reference/QueryClient#queryclientrefetchqueries
    */
   refetch(
     input?: inferProcedureInput<TProcedure>,
@@ -128,7 +138,7 @@ type DecorateProcedure<TProcedure extends AnyQueryProcedure> = {
   ): Promise<void>;
 
   /**
-   * @link https://tanstack.com/query/v4/docs/reference/QueryClient#queryclientcancelqueries
+   * @link https://tanstack.com/query/v5/docs/reference/QueryClient#queryclientcancelqueries
    */
   cancel(
     input?: inferProcedureInput<TProcedure>,
@@ -136,7 +146,7 @@ type DecorateProcedure<TProcedure extends AnyQueryProcedure> = {
   ): Promise<void>;
 
   /**
-   * @link https://tanstack.com/query/v4/docs/reference/QueryClient#queryclientresetqueries
+   * @link https://tanstack.com/query/v5/docs/reference/QueryClient#queryclientresetqueries
    */
   reset(
     input?: inferProcedureInput<TProcedure>,
@@ -144,7 +154,7 @@ type DecorateProcedure<TProcedure extends AnyQueryProcedure> = {
   ): Promise<void>;
 
   /**
-   * @link https://tanstack.com/query/v4/docs/reference/QueryClient#queryclientsetquerydata
+   * @link https://tanstack.com/query/v5/docs/reference/QueryClient#queryclientsetquerydata
    */
   setData(
     /**
@@ -152,37 +162,50 @@ type DecorateProcedure<TProcedure extends AnyQueryProcedure> = {
      */
     input: inferProcedureInput<TProcedure>,
     updater: Updater<
-      inferTransformedProcedureOutput<TProcedure> | undefined,
-      inferTransformedProcedureOutput<TProcedure> | undefined
+      inferTransformedProcedureOutput<TConfig, TProcedure> | undefined,
+      inferTransformedProcedureOutput<TConfig, TProcedure> | undefined
     >,
     options?: SetDataOptions,
   ): void;
 
   /**
-   * @link https://tanstack.com/query/v4/docs/reference/QueryClient#queryclientsetquerydata
+   * @link https://tanstack.com/query/v5/docs/reference/QueryClient#queryclientsetquerydata
    */
   setInfiniteData(
     input: inferProcedureInput<TProcedure>,
     updater: Updater<
-      InfiniteData<inferTransformedProcedureOutput<TProcedure>> | undefined,
-      InfiniteData<inferTransformedProcedureOutput<TProcedure>> | undefined
+      | InfiniteData<
+          inferTransformedProcedureOutput<TConfig, TProcedure>,
+          NonNullable<ExtractCursorType<inferProcedureInput<TProcedure>>> | null
+        >
+      | undefined,
+      | InfiniteData<
+          inferTransformedProcedureOutput<TConfig, TProcedure>,
+          NonNullable<ExtractCursorType<inferProcedureInput<TProcedure>>> | null
+        >
+      | undefined
     >,
     options?: SetDataOptions,
   ): void;
 
   /**
-   * @link https://tanstack.com/query/v4/docs/reference/QueryClient#queryclientgetquerydata
+   * @link https://tanstack.com/query/v5/docs/reference/QueryClient#queryclientgetquerydata
    */
   getData(
     input?: inferProcedureInput<TProcedure>,
-  ): inferTransformedProcedureOutput<TProcedure> | undefined;
+  ): inferTransformedProcedureOutput<TConfig, TProcedure> | undefined;
 
   /**
-   * @link https://tanstack.com/query/v4/docs/reference/QueryClient#queryclientgetquerydata
+   * @link https://tanstack.com/query/v5/docs/reference/QueryClient#queryclientgetquerydata
    */
   getInfiniteData(
     input?: inferProcedureInput<TProcedure>,
-  ): InfiniteData<inferTransformedProcedureOutput<TProcedure>> | undefined;
+  ):
+    | InfiniteData<
+        inferTransformedProcedureOutput<TConfig, TProcedure>,
+        NonNullable<ExtractCursorType<inferProcedureInput<TProcedure>>> | null
+      >
+    | undefined;
 };
 
 /**
@@ -193,7 +216,7 @@ type DecorateRouter = {
   /**
    * Invalidate the full router
    * @link https://trpc.io/docs/v10/useContext#query-invalidation
-   * @link https://tanstack.com/query/v4/docs/react/guides/query-invalidation
+   * @link https://tanstack.com/query/v5/docs/react/guides/query-invalidation
    */
   invalidate(
     input?: undefined,
@@ -214,32 +237,56 @@ export type DecoratedProcedureUtilsRecord<TRouter extends AnyRouter> =
       ? DecoratedProcedureUtilsRecord<TRouter['_def']['record'][TKey]> &
           DecorateRouter
       : // utils only apply to queries
-        DecorateProcedure<TRouter['_def']['record'][TKey]>;
+        DecorateProcedure<
+          TRouter['_def']['_config'],
+          TRouter['_def']['record'][TKey]
+        >;
   }; // Add functions that should be available at utils root
 
-type AnyDecoratedProcedure = DecorateProcedure<any>;
+type AnyDecoratedProcedure = DecorateProcedure<any, any>;
 
-export type CreateReactUtilsProxy<
+export type CreateReactUtils<
   TRouter extends AnyRouter,
   TSSRContext,
 > = ProtectedIntersection<
-  DecoratedProxyTRPCContextProps<TRouter, TSSRContext>,
+  DecoratedTRPCContextProps<TRouter, TSSRContext>,
   DecoratedProcedureUtilsRecord<TRouter>
 >;
 
+export const getQueryType = (
+  utilName: keyof AnyDecoratedProcedure,
+): QueryType => {
+  switch (utilName) {
+    case 'fetch':
+    case 'ensureData':
+    case 'prefetch':
+    case 'getData':
+    case 'setData':
+      return 'query';
+
+    case 'fetchInfinite':
+    case 'prefetchInfinite':
+    case 'getInfiniteData':
+    case 'setInfiniteData':
+      return 'infinite';
+
+    case 'cancel':
+    case 'invalidate':
+    case 'refetch':
+    case 'reset':
+      return 'any';
+  }
+};
+
 /**
  * @internal
  */
-export function createReactQueryUtilsProxy<
-  TRouter extends AnyRouter,
-  TSSRContext,
->(context: TRPCContextState<AnyRouter, unknown>) {
-  type CreateReactUtilsProxyReturnType = CreateReactUtilsProxy<
-    TRouter,
-    TSSRContext
-  >;
+export function createReactQueryUtils<TRouter extends AnyRouter, TSSRContext>(
+  context: TRPCContextState<AnyRouter, unknown>,
+) {
+  type CreateReactUtilsReturnType = CreateReactUtils<TRouter, TSSRContext>;
 
-  return createFlatProxy<CreateReactUtilsProxyReturnType>((key) => {
+  return createFlatProxy<CreateReactUtilsReturnType>((key) => {
     const contextName = key as (typeof contextProps)[number];
     if (contextName === 'client') {
       return createTRPCClientProxy(context.client);
@@ -248,53 +295,32 @@ export function createReactQueryUtilsProxy<
       return context[contextName];
     }
 
-    return createRecursiveProxy(({ path, args }) => {
-      const pathCopy = [key, ...path];
-      const utilName = pathCopy.pop() as keyof AnyDecoratedProcedure;
-
-      const fullPath = pathCopy.join('.');
-
-      const getOpts = (name: typeof utilName) => {
-        if (['setData', 'setInfiniteData'].includes(name)) {
-          const [input, updater, ...rest] = args as Parameters<
-            AnyDecoratedProcedure[typeof utilName]
-          >;
-          const queryKey = getQueryKeyInternal(fullPath, input);
-          return {
-            queryKey,
-            updater,
-            rest,
-          };
-        }
-
-        const [input, ...rest] = args as Parameters<
-          AnyDecoratedProcedure[typeof utilName]
-        >;
-        const queryKey = getQueryKeyInternal(fullPath, input);
-        return {
-          queryKey,
-          rest,
-        };
-      };
-
-      const { queryKey, rest, updater } = getOpts(utilName);
+    return createRecursiveProxy((opts) => {
+      const path = [key, ...opts.path];
+      const utilName = path.pop() as keyof AnyDecoratedProcedure;
+      const args = [...opts.args] as Parameters<
+        AnyDecoratedProcedure[typeof utilName]
+      >;
+      const input = args.shift(); // args can now be spread when input removed
+      const queryType = getQueryType(utilName);
+      const queryKey = getQueryKeyInternal(path, input, queryType);
 
       const contextMap: Record<keyof AnyDecoratedProcedure, () => unknown> = {
-        fetch: () => context.fetchQuery(queryKey, ...rest),
-        fetchInfinite: () => context.fetchInfiniteQuery(queryKey, ...rest),
-        prefetch: () => context.prefetchQuery(queryKey, ...rest),
+        fetch: () => context.fetchQuery(queryKey, ...args),
+        fetchInfinite: () => context.fetchInfiniteQuery(queryKey, args[0]),
+        prefetch: () => context.prefetchQuery(queryKey, ...args),
         prefetchInfinite: () =>
-          context.prefetchInfiniteQuery(queryKey, ...rest),
-        ensureData: () => context.ensureQueryData(queryKey, ...rest),
-        invalidate: () => context.invalidateQueries(queryKey, ...rest),
-        reset: () => context.resetQueries(queryKey, ...rest),
-        refetch: () => context.refetchQueries(queryKey, ...rest),
-        cancel: () => context.cancelQuery(queryKey, ...rest),
+          context.prefetchInfiniteQuery(queryKey, args[0]),
+        ensureData: () => context.ensureQueryData(queryKey, ...args),
+        invalidate: () => context.invalidateQueries(queryKey, ...args),
+        reset: () => context.resetQueries(queryKey, ...args),
+        refetch: () => context.refetchQueries(queryKey, ...args),
+        cancel: () => context.cancelQuery(queryKey, ...args),
         setData: () => {
-          context.setQueryData(queryKey, updater, ...rest);
+          context.setQueryData(queryKey, args[0], args[1]);
         },
         setInfiniteData: () => {
-          context.setInfiniteQueryData(queryKey, updater, ...rest);
+          context.setInfiniteQueryData(queryKey, args[0], args[1]);
         },
         getData: () => context.getQueryData(queryKey),
         getInfiniteData: () => context.getInfiniteQueryData(queryKey),

package/src/shared/types.ts

@@ -22,13 +22,6 @@ export interface UseMutationOverride {
  * @internal
  */
 export interface CreateTRPCReactOptions<_TRouter extends AnyRouter> {
-  /**
-   * Override behaviors of the built-in hooks
-   * @deprecated use `overrides` instead
-   */
-  unstable_overrides?: {
-    useMutation?: Partial<UseMutationOverride>;
-  };
   /**
    * Override behaviors of the built-in hooks
    */
@@ -47,9 +40,4 @@ export interface CreateTRPCReactOptions<_TRouter extends AnyRouter> {
    * @default undefined
    */
   context?: React.Context<any>;
-  /**
-   * Override the default React Query context
-   * @default undefined
-   */
-  reactQueryContext?: React.Context<QueryClient | undefined>;
 }

package/src/utils/inferReactQueryProcedure.ts

@@ -3,6 +3,7 @@ import {
   AnyMutationProcedure,
   AnyProcedure,
   AnyQueryProcedure,
+  AnyRootConfig,
   AnyRouter,
   inferProcedureInput,
 } from '@trpc/server';
@@ -18,16 +19,14 @@ import {
  * @internal
  */
 export type InferQueryOptions<
+  TConfig extends AnyRootConfig,
   TProcedure extends AnyProcedure,
-  TPath extends string,
-  TData = inferTransformedProcedureOutput<TProcedure>,
+  TData = inferTransformedProcedureOutput<TConfig, TProcedure>,
 > = Omit<
   UseTRPCQueryOptions<
-    TPath,
-    inferProcedureInput<TProcedure>,
-    inferTransformedProcedureOutput<TProcedure>,
-    inferTransformedProcedureOutput<TProcedure>,
-    TRPCClientErrorLike<TProcedure>,
+    inferTransformedProcedureOutput<TConfig, TProcedure>,
+    inferTransformedProcedureOutput<TConfig, TProcedure>,
+    TRPCClientErrorLike<TConfig>,
     TData
   >,
   'select'
@@ -36,49 +35,48 @@ export type InferQueryOptions<
 /**
  * @internal
  */
-export type InferMutationOptions<TProcedure extends AnyProcedure> =
-  UseTRPCMutationOptions<
-    inferProcedureInput<TProcedure>,
-    TRPCClientErrorLike<TProcedure>,
-    inferTransformedProcedureOutput<TProcedure>
-  >;
+export type InferMutationOptions<
+  TConfig extends AnyRootConfig,
+  TProcedure extends AnyProcedure,
+> = UseTRPCMutationOptions<
+  inferProcedureInput<TProcedure>,
+  TRPCClientErrorLike<TConfig>,
+  inferTransformedProcedureOutput<TConfig, TProcedure>
+>;
 
 /**
  * @internal
  */
-export type InferQueryResult<TProcedure extends AnyProcedure> =
-  UseTRPCQueryResult<
-    inferTransformedProcedureOutput<TProcedure>,
-    TRPCClientErrorLike<TProcedure>
-  >;
+export type InferQueryResult<
+  TConfig extends AnyRootConfig,
+  TProcedure extends AnyProcedure,
+> = UseTRPCQueryResult<
+  inferTransformedProcedureOutput<TConfig, TProcedure>,
+  TRPCClientErrorLike<TConfig>
+>;
 
 /**
  * @internal
  */
 export type InferMutationResult<
+  TConfig extends AnyRootConfig,
   TProcedure extends AnyProcedure,
   TContext = unknown,
 > = UseTRPCMutationResult<
-  inferTransformedProcedureOutput<TProcedure>,
-  TRPCClientErrorLike<TProcedure>,
+  inferTransformedProcedureOutput<TConfig, TProcedure>,
+  TRPCClientErrorLike<TConfig>,
   inferProcedureInput<TProcedure>,
   TContext
 >;
 
-export type inferReactQueryProcedureOptions<
-  TRouter extends AnyRouter,
-  TPath extends string = '',
-> = {
+export type inferReactQueryProcedureOptions<TRouter extends AnyRouter> = {
   [TKey in keyof TRouter['_def']['record']]: TRouter['_def']['record'][TKey] extends infer TRouterOrProcedure
     ? TRouterOrProcedure extends AnyRouter
-      ? inferReactQueryProcedureOptions<
-          TRouterOrProcedure,
-          `${TPath}${TKey & string}.`
-        >
+      ? inferReactQueryProcedureOptions<TRouterOrProcedure>
       : TRouterOrProcedure extends AnyMutationProcedure
-      ? InferMutationOptions<TRouterOrProcedure>
+      ? InferMutationOptions<TRouter['_def']['_config'], TRouterOrProcedure>
       : TRouterOrProcedure extends AnyQueryProcedure
-      ? InferQueryOptions<TRouterOrProcedure, `${TPath}${TKey & string}`>
+      ? InferQueryOptions<TRouter['_def']['_config'], TRouterOrProcedure>
       : never
     : never;
 };

package/dist/context-4557b3d3.js

@@ -1,38 +0,0 @@
-import { createContext } from 'react';
-
-/**
- * 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. This function converts from the `.` separated
- * path passed around internally by both the legacy and proxy implementation.
- * https://github.com/trpc/trpc/issues/2611
- **/
-function getArrayQueryKey(queryKey, type) {
-    const queryKeyArrayed = Array.isArray(queryKey) ? queryKey : [queryKey];
-    const [path, input] = queryKeyArrayed;
-    const arrayPath = typeof path !== 'string' || path === '' ? [] : path.split('.');
-    // Construct a query key that is easy to destructure and flexible for
-    // partial selecting etc.
-    // https://github.com/trpc/trpc/issues/3128
-    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 arrayPath.length ? [arrayPath] : [];
-    return [
-        arrayPath,
-        {
-            ...(typeof input !== 'undefined' && { input: input }),
-            ...(type && type !== 'any' && { type: type }),
-        },
-    ];
-}
-
-const contextProps = [
-    'client',
-    'ssrContext',
-    'ssrState',
-    'abortOnUnmount',
-];
-const TRPCContext = createContext(null);
-
-export { TRPCContext as T, contextProps as c, getArrayQueryKey as g };