@trpc/react-query 10.6.0 → 10.8.0

package/src/createTRPCReact.tsx

@@ -7,6 +7,7 @@ import {
   AnyRouter,
   AnySubscriptionProcedure,
   ProcedureRouterRecord,
+  ProtectedIntersection,
   inferProcedureInput,
 } from '@trpc/server';
 import {
@@ -15,6 +16,7 @@ import {
   inferTransformedSubscriptionOutput,
 } from '@trpc/server/shared';
 import { useMemo } from 'react';
+import { QueryKey, QueryType } from './internals/getArrayQueryKey';
 import { TRPCUseQueries } from './internals/useQueries';
 import {
   CreateReactUtilsProxy,
@@ -22,8 +24,13 @@ import {
   createReactQueryUtilsProxy,
 } from './shared';
 import {
-  CreateClient,
   CreateReactQueryHooks,
+  createHooksInternal,
+} from './shared/hooks/createHooksInternal';
+import {
+  CreateClient,
+  DefinedUseTRPCQueryOptions,
+  DefinedUseTRPCQueryResult,
   TRPCProvider,
   UseDehydratedState,
   UseTRPCInfiniteQueryOptions,
@@ -35,10 +42,45 @@ import {
   UseTRPCQueryResult,
   UseTRPCQuerySuccessResult,
   UseTRPCSubscriptionOptions,
-  createHooksInternal,
-} from './shared/hooks/createHooksInternal';
+} from './shared/hooks/types';
 import { CreateTRPCReactOptions } from './shared/types';
 
+/**
+ * @internal
+ */
+export interface ProcedureUseQuery<
+  TProcedure extends AnyProcedure,
+  TPath extends string,
+> {
+  <
+    TQueryFnData = inferTransformedProcedureOutput<TProcedure>,
+    TData = inferTransformedProcedureOutput<TProcedure>,
+  >(
+    input: inferProcedureInput<TProcedure>,
+    opts: DefinedUseTRPCQueryOptions<
+      TPath,
+      inferProcedureInput<TProcedure>,
+      TQueryFnData,
+      TData,
+      TRPCClientErrorLike<TProcedure>
+    >,
+  ): DefinedUseTRPCQueryResult<TData, TRPCClientErrorLike<TProcedure>>;
+
+  <
+    TQueryFnData = inferTransformedProcedureOutput<TProcedure>,
+    TData = inferTransformedProcedureOutput<TProcedure>,
+  >(
+    input: inferProcedureInput<TProcedure>,
+    opts?: UseTRPCQueryOptions<
+      TPath,
+      inferProcedureInput<TProcedure>,
+      TQueryFnData,
+      TData,
+      TRPCClientErrorLike<TProcedure>
+    >,
+  ): UseTRPCQueryResult<TData, TRPCClientErrorLike<TProcedure>>;
+}
+
 /**
  * @internal
  */
@@ -48,19 +90,16 @@ export type DecorateProcedure<
   TPath extends string,
 > = TProcedure extends AnyQueryProcedure
   ? {
-      useQuery: <
-        TQueryFnData = inferTransformedProcedureOutput<TProcedure>,
-        TData = inferTransformedProcedureOutput<TProcedure>,
-      >(
+      /**
+       * Method to extract the query key for a procedure
+       * @param type - defaults to `any`
+       * @link https://trpc.io/docs/useContext#-the-function-i-want-isnt-here
+       */
+      getQueryKey: (
         input: inferProcedureInput<TProcedure>,
-        opts?: UseTRPCQueryOptions<
-          TPath,
-          inferProcedureInput<TProcedure>,
-          TQueryFnData,
-          TData,
-          TRPCClientErrorLike<TProcedure>
-        >,
-      ) => UseTRPCQueryResult<TData, TRPCClientErrorLike<TProcedure>>;
+        type?: QueryType,
+      ) => QueryKey;
+      useQuery: ProcedureUseQuery<TProcedure, TPath>;
     } & (inferProcedureInput<TProcedure> extends { cursor?: any }
       ? {
           useInfiniteQuery: <
@@ -102,8 +141,8 @@ export type DecorateProcedure<
                 >,
               ];
             }
-          : {})
-      : {}) &
+          : object)
+      : object) &
       (TFlags extends 'ExperimentalSuspense'
         ? {
             useSuspenseQuery: <
@@ -126,7 +165,7 @@ export type DecorateProcedure<
               UseTRPCQuerySuccessResult<TData, TRPCClientErrorLike<TProcedure>>,
             ];
           }
-        : {})
+        : object)
   : TProcedure extends AnyMutationProcedure
   ? {
       useMutation: <TContext = unknown>(
@@ -164,7 +203,9 @@ export type DecoratedProcedureRecord<
   TPath extends string = '',
 > = {
   [TKey in keyof TProcedures]: TProcedures[TKey] extends AnyRouter
-    ? DecoratedProcedureRecord<
+    ? {
+        getQueryKey: () => QueryKey;
+      } & DecoratedProcedureRecord<
         TProcedures[TKey]['_def']['record'],
         TFlags,
         `${TPath}${TKey & string}.`
@@ -174,13 +215,25 @@ export type DecoratedProcedureRecord<
     : never;
 };
 
-export type CreateTRPCReact<TRouter extends AnyRouter, TSSRContext, TFlags> = {
+/**
+ * @internal
+ */
+export type CreateTRPCReactBase<TRouter extends AnyRouter, TSSRContext> = {
   useContext(): CreateReactUtilsProxy<TRouter, TSSRContext>;
   Provider: TRPCProvider<TRouter, TSSRContext>;
   createClient: CreateClient<TRouter>;
   useQueries: TRPCUseQueries<TRouter>;
   useDehydratedState: UseDehydratedState<TRouter>;
-} & DecoratedProcedureRecord<TRouter['_def']['record'], TFlags>;
+};
+
+export type CreateTRPCReact<
+  TRouter extends AnyRouter,
+  TSSRContext,
+  TFlags,
+> = ProtectedIntersection<
+  CreateTRPCReactBase<TRouter, TSSRContext>,
+  DecoratedProcedureRecord<TRouter['_def']['record'], TFlags>
+>;
 
 /**
  * @internal
@@ -207,7 +260,7 @@ export function createHooksInternalProxy<
       return (trpc as any)[key];
     }
 
-    return createReactProxyDecoration(key as string, trpc);
+    return createReactProxyDecoration(key, trpc);
   });
 }
 
@@ -215,9 +268,11 @@ export function createTRPCReact<
   TRouter extends AnyRouter,
   TSSRContext = unknown,
   TFlags = null,
->(opts?: CreateTRPCReactOptions<TRouter>) {
+>(
+  opts?: CreateTRPCReactOptions<TRouter>,
+): CreateTRPCReact<TRouter, TSSRContext, TFlags> {
   const hooks = createHooksInternal<TRouter, TSSRContext>(opts);
   const proxy = createHooksInternalProxy<TRouter, TSSRContext, TFlags>(hooks);
 
-  return proxy;
+  return proxy as any;
 }

package/src/internals/context.tsx

@@ -1,11 +1,13 @@
 import {
-  CancelOptions,
   FetchInfiniteQueryOptions,
   FetchQueryOptions,
+  QueryClient,
+} from '@tanstack/react-query';
+import {
+  CancelOptions,
   InfiniteData,
   InvalidateOptions,
   InvalidateQueryFilters,
-  QueryClient,
   RefetchOptions,
   RefetchQueryFilters,
   ResetOptions,
@@ -15,16 +17,13 @@ import {
 } from '@tanstack/react-query';
 import {
   TRPCClient,
-  TRPCClientError,
   TRPCRequestOptions,
   inferRouterProxyClient,
 } from '@trpc/client';
-import type {
-  AnyRouter,
-  inferHandlerInput,
-  inferProcedureInput,
-} from '@trpc/server';
-import type { inferTransformedProcedureOutput } from '@trpc/server/shared';
+import { TRPCClientError } from '@trpc/client';
+import type { AnyRouter } from '@trpc/server';
+import { inferHandlerInput, inferProcedureInput } from '@trpc/server';
+import { inferTransformedProcedureOutput } from '@trpc/server/shared';
 import { createContext } from 'react';
 
 export interface TRPCFetchQueryOptions<TInput, TError, TOutput>
@@ -64,6 +63,9 @@ export interface ProxyTRPCContextProps<TRouter extends AnyRouter, TSSRContext> {
   abortOnUnmount?: boolean;
 }
 
+/**
+ * @internal
+ */
 export type DecoratedProxyTRPCContextProps<
   TRouter extends AnyRouter,
   TSSRContext,
@@ -87,6 +89,27 @@ export const contextProps: (keyof ProxyTRPCContextProps<any, any>)[] = [
 ];
 
 /** @internal */
+type TRPCContextResetQueries<TRouter extends AnyRouter> =
+  /**
+   * @link https://react-query.tanstack.com/reference/QueryClient#queryclientresetqueries
+   */
+  (<
+    TPath extends keyof TRouter['_def']['queries'] & string,
+    TInput extends inferProcedureInput<TRouter['_def']['queries'][TPath]>,
+  >(
+    pathAndInput?: [TPath, TInput?] | TPath,
+    filters?: ResetQueryFilters,
+    options?: ResetOptions,
+  ) => Promise<void>) &
+    /**
+     * @link https://react-query.tanstack.com/reference/QueryClient#queryclientresetqueries
+     */
+    ((filters?: ResetQueryFilters, options?: ResetOptions) => Promise<void>);
+
+/**
+ * @deprecated
+ * @internal
+ **/
 export interface TRPCContextState<
   TRouter extends AnyRouter,
   TSSRContext = undefined,
@@ -94,7 +117,7 @@ export interface TRPCContextState<
   /**
    * @link https://tanstack.com/query/v4/docs/reference/QueryClient#queryclientfetchquery
    */
-  fetchQuery<
+  fetchQuery: <
     TPath extends keyof TRouter['_def']['queries'] & string,
     TProcedure extends TRouter['_def']['queries'][TPath],
     TOutput extends inferTransformedProcedureOutput<TProcedure>,
@@ -102,11 +125,11 @@ export interface TRPCContextState<
   >(
     pathAndInput: [path: TPath, ...args: inferHandlerInput<TProcedure>],
     opts?: TRPCFetchQueryOptions<TInput, TRPCClientError<TRouter>, TOutput>,
-  ): Promise<TOutput>;
+  ) => Promise<TOutput>;
   /**
    * @link https://tanstack.com/query/v4/docs/reference/QueryClient#queryclientfetchinfinitequery
    */
-  fetchInfiniteQuery<
+  fetchInfiniteQuery: <
     TPath extends keyof TRouter['_def']['queries'] & string,
     TProcedure extends TRouter['_def']['queries'][TPath],
     TOutput extends inferTransformedProcedureOutput<TProcedure>,
@@ -118,11 +141,11 @@ export interface TRPCContextState<
       TRPCClientError<TRouter>,
       TOutput
     >,
-  ): Promise<InfiniteData<TOutput>>;
+  ) => Promise<InfiniteData<TOutput>>;
   /**
    * @link https://react-query.tanstack.com/guides/prefetching
    */
-  prefetchQuery<
+  prefetchQuery: <
     TPath extends keyof TRouter['_def']['queries'] & string,
     TProcedure extends TRouter['_def']['queries'][TPath],
     TOutput extends inferTransformedProcedureOutput<TProcedure>,
@@ -130,12 +153,12 @@ export interface TRPCContextState<
   >(
     pathAndInput: [path: TPath, ...args: inferHandlerInput<TProcedure>],
     opts?: TRPCFetchQueryOptions<TInput, TRPCClientError<TRouter>, TOutput>,
-  ): Promise<void>;
+  ) => Promise<void>;
 
   /**
    * @link https://tanstack.com/query/v4/docs/reference/QueryClient#queryclientprefetchinfinitequery
    */
-  prefetchInfiniteQuery<
+  prefetchInfiniteQuery: <
     TPath extends keyof TRouter['_def']['queries'] & string,
     TProcedure extends TRouter['_def']['queries'][TPath],
     TOutput extends inferTransformedProcedureOutput<TProcedure>,
@@ -147,46 +170,24 @@ export interface TRPCContextState<
       TRPCClientError<TRouter>,
       TOutput
     >,
-  ): Promise<void>;
+  ) => Promise<void>;
 
   /**
    * @link https://react-query.tanstack.com/guides/query-invalidation
    */
-  invalidateQueries<
+  invalidateQueries: <
     TPath extends keyof TRouter['_def']['queries'] & string,
     TInput extends inferProcedureInput<TRouter['_def']['queries'][TPath]>,
   >(
     pathAndInput?: [TPath, TInput?] | TPath,
     filters?: InvalidateQueryFilters,
     options?: InvalidateOptions,
-  ): Promise<void>;
-  /**
-   * @link https://react-query.tanstack.com/guides/query-invalidation
-   */
-  invalidateQueries(
-    filters?: InvalidateQueryFilters,
-    options?: InvalidateOptions,
-  ): Promise<void>;
-
-  /**
-   * @link https://react-query.tanstack.com/reference/QueryClient#queryclientresetqueries
-   */
-  resetQueries<
-    TPath extends keyof TRouter['_def']['queries'] & string,
-    TInput extends inferProcedureInput<TRouter['_def']['queries'][TPath]>,
-  >(
-    pathAndInput?: [TPath, TInput?] | TPath,
-    filters?: ResetQueryFilters,
-    options?: ResetOptions,
-  ): Promise<void>;
+  ) => Promise<void>;
 
   /**
    * @link https://react-query.tanstack.com/reference/QueryClient#queryclientresetqueries
    */
-  resetQueries(
-    filters?: ResetQueryFilters,
-    options?: ResetOptions,
-  ): Promise<void>;
+  resetQueries: TRPCContextResetQueries<TRouter>;
 
   /**
    * @link https://react-query.tanstack.com/reference/QueryClient#queryclientrefetchqueries
@@ -210,17 +211,17 @@ export interface TRPCContextState<
   /**
    * @link https://react-query.tanstack.com/guides/query-cancellation
    */
-  cancelQuery<
+  cancelQuery: <
     TPath extends keyof TRouter['_def']['queries'] & string,
     TInput extends inferProcedureInput<TRouter['_def']['queries'][TPath]>,
   >(
     pathAndInput: [TPath, TInput?],
     options?: CancelOptions,
-  ): Promise<void>;
+  ) => Promise<void>;
   /**
    * @link https://react-query.tanstack.com/reference/QueryClient#queryclientsetquerydata
    */
-  setQueryData<
+  setQueryData: <
     TPath extends keyof TRouter['_def']['queries'] & string,
     TInput extends inferProcedureInput<TRouter['_def']['queries'][TPath]>,
     TOutput extends inferTransformedProcedureOutput<
@@ -230,11 +231,11 @@ export interface TRPCContextState<
     pathAndInput: [TPath, TInput?],
     updater: Updater<TOutput | undefined, TOutput | undefined>,
     options?: SetDataOptions,
-  ): void;
+  ) => void;
   /**
    * @link https://react-query.tanstack.com/reference/QueryClient#queryclientgetquerydata
    */
-  getQueryData<
+  getQueryData: <
     TPath extends keyof TRouter['_def']['queries'] & string,
     TInput extends inferProcedureInput<TRouter['_def']['queries'][TPath]>,
     TOutput extends inferTransformedProcedureOutput<
@@ -242,11 +243,11 @@ export interface TRPCContextState<
     >,
   >(
     pathAndInput: [TPath, TInput?],
-  ): TOutput | undefined;
+  ) => TOutput | undefined;
   /**
    * @link https://react-query.tanstack.com/reference/QueryClient#queryclientsetquerydata
    */
-  setInfiniteQueryData<
+  setInfiniteQueryData: <
     TPath extends keyof TRouter['_def']['queries'] & string,
     TInput extends inferProcedureInput<TRouter['_def']['queries'][TPath]>,
     TOutput extends inferTransformedProcedureOutput<
@@ -259,11 +260,11 @@ export interface TRPCContextState<
       InfiniteData<TOutput> | undefined
     >,
     options?: SetDataOptions,
-  ): void;
+  ) => void;
   /**
    * @link https://react-query.tanstack.com/reference/QueryClient#queryclientgetquerydata
    */
-  getInfiniteQueryData<
+  getInfiniteQueryData: <
     TPath extends keyof TRouter['_def']['queries'] & string,
     TInput extends inferProcedureInput<TRouter['_def']['queries'][TPath]>,
     TOutput extends inferTransformedProcedureOutput<
@@ -271,7 +272,7 @@ export interface TRPCContextState<
     >,
   >(
     pathAndInput: [TPath, TInput?],
-  ): InfiniteData<TOutput> | undefined;
+  ) => InfiniteData<TOutput> | undefined;
 }
 
 export const TRPCContext = createContext(null as any);

package/src/internals/getArrayQueryKey.test.ts

@@ -1,6 +1,17 @@
 import { getArrayQueryKey } from './getArrayQueryKey';
 
 test('getArrayQueryKey', () => {
+  // empty path should not nest an extra array
+  expect(getArrayQueryKey('', 'any')).toMatchInlineSnapshot(`Array []`);
+
+  // should not nest an empty object
+  expect(getArrayQueryKey('foo', 'any')).toMatchInlineSnapshot(`
+    Array [
+      Array [
+        "foo",
+      ],
+    ]
+  `);
   expect(getArrayQueryKey('foo', 'query')).toMatchInlineSnapshot(`
     Array [
       Array [

package/src/internals/getArrayQueryKey.ts

@@ -1,16 +1,21 @@
 export type QueryType = 'query' | 'infinite' | 'any';
 
+export type QueryKey = [
+  string[],
+  { input?: unknown; type?: Exclude<QueryType, '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
  * 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
- */
+ **/
 export function getArrayQueryKey(
   queryKey: string | [string] | [string, ...unknown[]] | unknown[],
   type: QueryType,
-): [string[], { input?: unknown; type?: Exclude<QueryType, 'any'> }] {
+): QueryKey {
   const queryKeyArrayed = Array.isArray(queryKey) ? queryKey : [queryKey];
   const [path, input] = queryKeyArrayed;
 
@@ -20,6 +25,10 @@ export function getArrayQueryKey(
   // 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] : ([] as unknown as QueryKey);
   return [
     arrayPath,
     {

package/src/internals/getClientArgs.ts

@@ -0,0 +1,7 @@
+export function getClientArgs<TPathAndInput extends unknown[], TOptions>(
+  pathAndInput: TPathAndInput,
+  opts: TOptions,
+) {
+  const [path, input] = pathAndInput;
+  return [path, input, (opts as any)?.trpc] as const;
+}

package/src/internals/getQueryKey.ts

@@ -6,5 +6,6 @@ export function getQueryKey(
   path: string,
   input: unknown,
 ): [string] | [string, unknown] {
-  return input === undefined ? [path] : [path, input];
+  if (path.length) return input === undefined ? [path] : [path, input];
+  return [] as unknown as [string];
 }

package/src/internals/useHookResult.ts

@@ -0,0 +1,18 @@
+import { useRef } from 'react';
+
+export interface TRPCHookResult {
+  trpc: {
+    path: string;
+  };
+}
+
+/**
+ * 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;
+}