@trpc/tanstack-react-query 11.0.0-rc.808 → 11.0.0-rc.814

package/src/internals/createOptionsProxy.ts

@@ -1,4 +1,9 @@
-import type { DataTag, QueryClient, QueryFilters } from '@tanstack/react-query';
+import type {
+  DataTag,
+  InfiniteData,
+  QueryClient,
+  QueryFilters,
+} from '@tanstack/react-query';
 import type { TRPCClient, TRPCRequestOptions } from '@trpc/client';
 import { getUntypedClient, TRPCUntypedClient } from '@trpc/client';
 import type {
@@ -28,10 +33,11 @@ import {
   type TRPCSubscriptionOptions,
 } from './subscriptionOptions';
 import type {
-  QueryType,
+  OptionalCursorInput,
   ResolverDef,
   TRPCMutationKey,
   TRPCQueryKey,
+  WithRequired,
 } from './types';
 import {
   getMutationKeyInternal,
@@ -39,61 +45,120 @@ import {
   unwrapLazyArg,
 } from './utils';
 
-export interface DecorateQueryKeyable {
+export interface DecorateRouterKeyable {
   /**
-   * Calculate the TanStack Query Key for a Route
+   * Calculate the TanStack Query Key for any path, could be used to invalidate every procedure beneath this path
    *
    * @see https://tanstack.com/query/latest/docs/framework/react/guides/query-keys
    * @see https://trpc.io/docs/client/tanstack-react-query/usage#queryKey
    */
-  queryKey: () => TRPCQueryKey;
+  pathKey: () => TRPCQueryKey;
 
   /**
-   * Calculate a TanStack Query Filter for a Route
+   * Calculate a TanStack Query Filter for any path, could be used to manipulate every procedure beneath this path
    *
    * @see https://tanstack.com/query/latest/docs/framework/react/guides/filters
    * @see https://trpc.io/docs/client/tanstack-react-query/usage#queryFilter
    */
-  queryFilter: (input?: undefined, filters?: QueryFilters) => QueryFilters;
+  pathFilter: (
+    filters?: QueryFilters<unknown, unknown, unknown, TRPCQueryKey>,
+  ) => WithRequired<
+    QueryFilters<unknown, unknown, unknown, TRPCQueryKey>,
+    'queryKey'
+  >;
+}
+
+interface TypeHelper<TDef extends ResolverDef> {
+  /**
+   * @internal prefer using inferInput and inferOutput to access types
+   */
+  '~types': {
+    input: TDef['input'];
+    output: TDef['output'];
+    errorShape: TDef['errorShape'];
+  };
 }
 
 export type inferInput<
   TProcedure extends
+    | DecorateInfiniteQueryProcedure<any>
     | DecorateQueryProcedure<any>
     | DecorateMutationProcedure<any>,
 > = TProcedure['~types']['input'];
 
 export type inferOutput<
   TProcedure extends
+    | DecorateInfiniteQueryProcedure<any>
     | DecorateQueryProcedure<any>
     | DecorateMutationProcedure<any>,
 > = TProcedure['~types']['output'];
 
-export interface DecorateQueryProcedure<TDef extends ResolverDef> {
+export interface DecorateInfiniteQueryProcedure<TDef extends ResolverDef>
+  extends TypeHelper<TDef> {
   /**
-   * @internal prefer using inferInput and inferOutput to access types
+   * Create a set of type-safe infinite query options that can be passed to `useInfiniteQuery`, `prefetchInfiniteQuery` etc.
+   *
+   * @see https://tanstack.com/query/latest/docs/framework/react/reference/infiniteQueryOptions#infinitequeryoptions
+   * @see https://trpc.io/docs/client/tanstack-react-query/usage#infiniteQueryOptions
    */
-  '~types': {
-    input: TDef['input'];
-    output: TDef['output'];
-    errorShape: TDef['errorShape'];
-  };
+  infiniteQueryOptions: TRPCInfiniteQueryOptions<TDef>;
 
   /**
-   * Create a set of type-safe query options that can be passed to `useQuery`, `prefetchQuery` etc.
+   * Calculate the TanStack Query Key for a Infinite Query Procedure
    *
-   * @see https://tanstack.com/query/latest/docs/framework/react/reference/queryOptions#queryoptions
-   * @see https://trpc.io/docs/client/tanstack-react-query/usage#queryOptions
+   * @see https://tanstack.com/query/latest/docs/framework/react/guides/query-keys
+   * @see https://trpc.io/docs/client/tanstack-react-query/usage#queryKey
    */
-  queryOptions: TRPCQueryOptions<TDef>;
+  infiniteQueryKey: (
+    input?: Partial<TDef['input']>,
+  ) => DataTag<
+    TRPCQueryKey,
+    InfiniteData<TDef['output'], number | null>,
+    TDef['errorShape']
+  >;
 
   /**
-   * Create a set of type-safe infinite query options that can be passed to `useInfiniteQuery`, `prefetchInfiniteQuery` etc.
+   * Calculate a TanStack Query Filter for a Infinite Query Procedure
    *
-   * @see https://tanstack.com/query/latest/docs/framework/react/reference/infiniteQueryOptions#infinitequeryoptions
-   * @see https://trpc.io/docs/client/tanstack-react-query/usage#infiniteQueryOptions
+   * @see https://tanstack.com/query/latest/docs/framework/react/guides/filters
+   * @see https://trpc.io/docs/client/tanstack-react-query/usage#queryFilter
    */
-  infiniteQueryOptions: TRPCInfiniteQueryOptions<TDef>;
+  infiniteQueryFilter: (
+    input?: Partial<TDef['input']>,
+    filters?: QueryFilters<
+      InfiniteData<TDef['output'], number | null>,
+      TDef['errorShape'],
+      InfiniteData<TDef['output'], number | null>,
+      DataTag<
+        TRPCQueryKey,
+        InfiniteData<TDef['output'], number | null>,
+        TDef['errorShape']
+      >
+    >,
+  ) => WithRequired<
+    QueryFilters<
+      InfiniteData<TDef['output'], number | null>,
+      TDef['errorShape'],
+      InfiniteData<TDef['output'], number | null>,
+      DataTag<
+        TRPCQueryKey,
+        InfiniteData<TDef['output'], number | null>,
+        TDef['errorShape']
+      >
+    >,
+    'queryKey'
+  >;
+}
+export interface DecorateQueryProcedure<TDef extends ResolverDef>
+  extends TypeHelper<TDef>,
+    DecorateRouterKeyable {
+  /**
+   * Create a set of type-safe query options that can be passed to `useQuery`, `prefetchQuery` etc.
+   *
+   * @see https://tanstack.com/query/latest/docs/framework/react/reference/queryOptions#queryoptions
+   * @see https://trpc.io/docs/client/tanstack-react-query/usage#queryOptions
+   */
+  queryOptions: TRPCQueryOptions<TDef>;
 
   /**
    * Calculate the TanStack Query Key for a Query Procedure
@@ -102,7 +167,7 @@ export interface DecorateQueryProcedure<TDef extends ResolverDef> {
    * @see https://trpc.io/docs/client/tanstack-react-query/usage#queryKey
    */
   queryKey: (
-    input?: TDef['input'],
+    input?: Partial<TDef['input']>,
   ) => DataTag<TRPCQueryKey, TDef['output'], TDef['errorShape']>;
 
   /**
@@ -112,25 +177,26 @@ export interface DecorateQueryProcedure<TDef extends ResolverDef> {
    * @see https://trpc.io/docs/client/tanstack-react-query/usage#queryFilter
    */
   queryFilter: (
-    input?: TDef['input'],
-    filters?: QueryFilters<TDef['output'], TDef['errorShape']>,
-  ) => QueryFilters<
-    TDef['output'],
-    TDef['errorShape'],
-    TDef['output'],
-    DataTag<TRPCQueryKey, TDef['output'], TDef['errorShape']>
+    input?: Partial<TDef['input']>,
+    filters?: QueryFilters<
+      TDef['output'],
+      TDef['errorShape'],
+      TDef['output'],
+      DataTag<TRPCQueryKey, TDef['output'], TDef['errorShape']>
+    >,
+  ) => WithRequired<
+    QueryFilters<
+      TDef['output'],
+      TDef['errorShape'],
+      TDef['output'],
+      DataTag<TRPCQueryKey, TDef['output'], TDef['errorShape']>
+    >,
+    'queryKey'
   >;
 }
 
-export interface DecorateMutationProcedure<TDef extends ResolverDef> {
-  /**
-   * @internal prefer using inferInput and inferOutput to access types
-   */
-  '~types': {
-    input: TDef['input'];
-    output: TDef['output'];
-  };
-
+export interface DecorateMutationProcedure<TDef extends ResolverDef>
+  extends TypeHelper<TDef> {
   /**
    * Create a set of type-safe mutation options that can be passed to `useMutation`
    *
@@ -159,7 +225,10 @@ export type DecorateProcedure<
   TType extends TRPCProcedureType,
   TDef extends ResolverDef,
 > = TType extends 'query'
-  ? DecorateQueryProcedure<TDef>
+  ? DecorateQueryProcedure<TDef> &
+      (TDef['input'] extends OptionalCursorInput
+        ? DecorateInfiniteQueryProcedure<TDef>
+        : Record<string, never>)
   : TType extends 'mutation'
     ? DecorateMutationProcedure<TDef>
     : TType extends 'subscription'
@@ -169,13 +238,13 @@ export type DecorateProcedure<
 /**
  * @internal
  */
-export type DecoratedProcedureUtilsRecord<
+export type DecoratedRouterRecord<
   TRoot extends AnyTRPCRootTypes,
   TRecord extends TRPCRouterRecord,
 > = {
   [TKey in keyof TRecord]: TRecord[TKey] extends infer $Value
     ? $Value extends TRPCRouterRecord
-      ? DecoratedProcedureUtilsRecord<TRoot, $Value> & DecorateQueryKeyable
+      ? DecoratedRouterRecord<TRoot, $Value> & DecorateRouterKeyable
       : $Value extends AnyTRPCProcedure
         ? DecorateProcedure<
             $Value['_def']['type'],
@@ -191,11 +260,11 @@ export type DecoratedProcedureUtilsRecord<
 };
 
 export type TRPCOptionsProxy<TRouter extends AnyTRPCRouter> =
-  DecoratedProcedureUtilsRecord<
+  DecoratedRouterRecord<
     TRouter['_def']['_config']['$types'],
     TRouter['_def']['record']
   > &
-    DecorateQueryKeyable;
+    DecorateRouterKeyable;
 
 export interface TRPCOptionsProxyOptionsBase {
   queryClient: QueryClient | (() => QueryClient);
@@ -228,19 +297,10 @@ export type TRPCOptionsProxyOptions<TRouter extends AnyTRPCRouter> =
 
 type UtilsMethods =
   | keyof DecorateQueryProcedure<any>
+  | keyof DecorateInfiniteQueryProcedure<any>
   | keyof DecorateMutationProcedure<any>
-  | keyof DecorateSubscriptionProcedure<any>;
-
-function getQueryType(method: UtilsMethods) {
-  const map: Partial<Record<UtilsMethods, QueryType>> = {
-    queryOptions: 'query',
-    infiniteQueryOptions: 'infinite',
-    subscriptionOptions: 'any',
-    mutationOptions: 'any',
-  };
-
-  return map[method];
-}
+  | keyof DecorateSubscriptionProcedure<any>
+  | keyof DecorateRouterKeyable;
 
 /**
  * Create a typed proxy from your router types. Can also be used on the server.
@@ -280,45 +340,59 @@ export function createTRPCOptionsProxy<TRouter extends AnyTRPCRouter>(
     const utilName = path.pop() as UtilsMethods;
     const [arg1, arg2] = args as any[];
 
-    function getQueryKey() {
-      const queryType = getQueryType(utilName);
-
-      return getQueryKeyInternal(path, arg1, queryType ?? 'any');
-    }
-
     const contextMap: Record<UtilsMethods, () => unknown> = {
       '~types': undefined as any,
 
-      mutationKey: () => {
-        return getMutationKeyInternal(path);
+      pathKey: () => {
+        return getQueryKeyInternal(path);
+      },
+      pathFilter: (): QueryFilters => {
+        return {
+          ...arg1,
+          queryKey: getQueryKeyInternal(path),
+        };
+      },
+
+      queryOptions: () => {
+        return trpcQueryOptions({
+          input: arg1,
+          opts: arg2,
+          path,
+          queryClient: opts.queryClient,
+          queryKey: getQueryKeyInternal(path, arg1, 'query'),
+          query: callIt('query'),
+        });
       },
       queryKey: () => {
-        return getQueryKey();
+        return getQueryKeyInternal(path, arg1, 'query');
       },
       queryFilter: (): QueryFilters => {
         return {
           ...arg2,
-          queryKey: getQueryKey(),
+          queryKey: getQueryKeyInternal(path, arg1, 'query'),
         };
       },
+
       infiniteQueryOptions: () => {
         return trpcInfiniteQueryOptions({
+          input: arg1,
           opts: arg2,
           path,
           queryClient: opts.queryClient,
-          queryKey: getQueryKey(),
+          queryKey: getQueryKeyInternal(path, arg1, 'infinite'),
           query: callIt('query'),
         });
       },
-      queryOptions: () => {
-        return trpcQueryOptions({
-          opts: arg2,
-          path,
-          queryClient: opts.queryClient,
-          queryKey: getQueryKey(),
-          query: callIt('query'),
-        });
+      infiniteQueryKey: () => {
+        return getQueryKeyInternal(path, arg1, 'infinite');
+      },
+      infiniteQueryFilter: (): QueryFilters => {
+        return {
+          ...arg2,
+          queryKey: getQueryKeyInternal(path, arg1, 'infinite'),
+        };
       },
+
       mutationOptions: () => {
         return trpcMutationOptions({
           opts: arg1,
@@ -328,11 +402,15 @@ export function createTRPCOptionsProxy<TRouter extends AnyTRPCRouter>(
           overrides: opts.overrides?.mutations,
         });
       },
+      mutationKey: () => {
+        return getMutationKeyInternal(path);
+      },
+
       subscriptionOptions: () => {
         return trpcSubscriptionOptions({
           opts: arg2,
           path,
-          queryKey: getQueryKey(),
+          queryKey: getQueryKeyInternal(path, arg1, 'any'),
           subscribe: callIt('subscription'),
         });
       },

package/src/internals/infiniteQueryOptions.ts

@@ -206,14 +206,15 @@ type AnyTRPCInfiniteQueryOptionsOut =
   | UndefinedTRPCInfiniteQueryOptionsOut<unknown, unknown, unknown, unknown>;
 
 export function trpcInfiniteQueryOptions(args: {
+  input: unknown;
   query: typeof TRPCUntypedClient.prototype.query;
   queryClient: QueryClient | (() => QueryClient);
   path: readonly string[];
   queryKey: TRPCQueryKey;
   opts: AnyTRPCInfiniteQueryOptionsIn;
 }): AnyTRPCInfiniteQueryOptionsOut {
-  const { query, path, queryKey, opts } = args;
-  const inputIsSkipToken = queryKey[1]?.input === skipToken;
+  const { input, query, path, queryKey, opts } = args;
+  const inputIsSkipToken = input === skipToken;
 
   const queryFn: QueryFunction<unknown, TRPCQueryKey, unknown> = async (
     queryFnContext,

package/src/internals/queryOptions.ts

@@ -169,16 +169,17 @@ type AnyTRPCQueryOptionsOut =
  * @internal
  */
 export function trpcQueryOptions(args: {
+  input: unknown;
   query: typeof TRPCUntypedClient.prototype.query;
   queryClient: QueryClient | (() => QueryClient);
   path: readonly string[];
   queryKey: TRPCQueryKey;
   opts: AnyTRPCQueryOptionsIn;
 }): AnyTRPCQueryOptionsOut {
-  const { query, path, queryKey, opts } = args;
+  const { input, query, path, queryKey, opts } = args;
   const queryClient = unwrapLazyArg(args.queryClient);
 
-  const inputIsSkipToken = queryKey[1]?.input === skipToken;
+  const inputIsSkipToken = input === skipToken;
 
   const queryFn: QueryFunction<unknown, TRPCQueryKey> = async (
     queryFnContext,

package/src/internals/types.ts

@@ -1,5 +1,13 @@
 import type { TRPCRequestOptions } from '@trpc/client';
 
+/**
+ * Turn a set of optional properties into required
+ * @internal
+ */
+export type WithRequired<TObj, TKey extends keyof TObj> = TObj & {
+  [P in TKey]-?: TObj[P];
+};
+
 /**
  * @internal
  */
@@ -10,10 +18,16 @@ export type ResolverDef = {
   errorShape: any;
 };
 
+/**
+ * @remark `void` is here due to https://github.com/trpc/trpc/pull/4374
+ */
+type CursorInput = { cursor?: any };
+export type OptionalCursorInput = CursorInput | void;
+
 /**
  * @internal
  */
-export type ExtractCursorType<TInput> = TInput extends { cursor?: any }
+export type ExtractCursorType<TInput> = TInput extends CursorInput
   ? TInput['cursor']
   : unknown;
 

package/src/internals/utils.ts

@@ -1,5 +1,4 @@
-import type { QueryClient } from '@tanstack/react-query';
-import { skipToken } from '@tanstack/react-query';
+import { skipToken, type QueryClient } from '@tanstack/react-query';
 import { isFunction, isObject } from '@trpc/server/unstable-core-do-not-import';
 import type {
   QueryType,
@@ -83,8 +82,8 @@ export async function buildQueryFromAsyncIterable(
  */
 export function getQueryKeyInternal(
   path: readonly string[],
-  input: unknown,
-  type: QueryType,
+  input?: unknown,
+  type?: QueryType,
 ): TRPCQueryKey {
   // Construct a query key that is easy to destructure and flexible for
   // partial selecting etc.
@@ -119,6 +118,7 @@ export function getQueryKeyInternal(
       },
     ];
   }
+
   return [
     splitPath,
     {