@trpc/react-query 11.0.0-next.91 → 11.0.0-rc.329

package/src/shared/hooks/createHooksInternal.tsx

@@ -4,36 +4,33 @@ import {
   useQueries as __useQueries,
   useQuery as __useQuery,
   useSuspenseInfiniteQuery as __useSuspenseInfiniteQuery,
+  useSuspenseQueries as __useSuspenseQueries,
   useSuspenseQuery as __useSuspenseQuery,
-  DehydratedState,
   hashKey,
+  skipToken,
   useQueryClient,
 } from '@tanstack/react-query';
-import { createTRPCUntypedClient, TRPCClientErrorLike } from '@trpc/client';
-import type { AnyRouter } from '@trpc/server';
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import {
-  SSRState,
-  TRPCContext,
-  TRPCContextState,
-} from '../../internals/context';
+import type { TRPCClientErrorLike } from '@trpc/client';
+import { createTRPCUntypedClient } from '@trpc/client';
+import type { AnyRouter } from '@trpc/server/unstable-core-do-not-import';
+import * as React from 'react';
+import type { SSRState, TRPCContextState } from '../../internals/context';
+import { TRPCContext } from '../../internals/context';
 import { getClientArgs } from '../../internals/getClientArgs';
-import { getQueryKeyInternal, TRPCQueryKey } from '../../internals/getQueryKey';
+import type { TRPCQueryKey } from '../../internals/getQueryKey';
+import { getQueryKeyInternal } from '../../internals/getQueryKey';
 import { useHookResult } from '../../internals/useHookResult';
-import { TRPCUseQueries } from '../../internals/useQueries';
+import type {
+  TRPCUseQueries,
+  TRPCUseSuspenseQueries,
+} from '../../internals/useQueries';
+import { createUtilityFunctions } from '../../utils/createUtilityFunctions';
 import { createUseQueries } from '../proxy/useQueriesProxy';
-import { CreateTRPCReactOptions, UseMutationOverride } from '../types';
-import {
+import type { CreateTRPCReactOptions, UseMutationOverride } from '../types';
+import type {
   CreateClient,
   TRPCProvider,
   TRPCQueryOptions,
-  UseDehydratedState,
   UseTRPCInfiniteQueryOptions,
   UseTRPCInfiniteQueryResult,
   UseTRPCMutationOptions,
@@ -71,163 +68,38 @@ export function createRootHooks<
 
   const TRPCProvider: TRPCProvider<TRouter, TSSRContext> = (props) => {
     const { abortOnUnmount = false, client, queryClient, ssrContext } = props;
-    const [ssrState, setSSRState] = useState<SSRState>(props.ssrState ?? false);
-    useEffect(() => {
+    const [ssrState, setSSRState] = React.useState<SSRState>(
+      props.ssrState ?? false,
+    );
+
+    const fns = React.useMemo(
+      () =>
+        createUtilityFunctions({
+          client,
+          queryClient,
+        }),
+      [client, queryClient],
+    );
+
+    const contextValue = React.useMemo<ProviderContext>(
+      () => ({
+        abortOnUnmount,
+        queryClient,
+        client,
+        ssrContext: ssrContext ?? null,
+        ssrState,
+        ...fns,
+      }),
+      [abortOnUnmount, client, fns, queryClient, ssrContext, ssrState],
+    );
+
+    React.useEffect(() => {
       // Only updating state to `mounted` if we are using SSR.
       // This makes it so we don't have an unnecessary re-render when opting out of SSR.
       setSSRState((state) => (state ? 'mounted' : false));
     }, []);
     return (
-      <Context.Provider
-        value={{
-          abortOnUnmount,
-          queryClient,
-          client,
-          ssrContext: ssrContext ?? null,
-          ssrState,
-          fetchQuery: useCallback(
-            (queryKey, opts) => {
-              return queryClient.fetchQuery({
-                ...opts,
-                queryKey,
-                queryFn: () => client.query(...getClientArgs(queryKey, opts)),
-              });
-            },
-            [client, queryClient],
-          ),
-          fetchInfiniteQuery: useCallback(
-            (queryKey, opts) => {
-              return queryClient.fetchInfiniteQuery({
-                ...opts,
-                queryKey,
-                queryFn: ({ pageParam }) => {
-                  return client.query(
-                    ...getClientArgs(queryKey, opts, pageParam),
-                  );
-                },
-                initialPageParam: opts?.initialCursor ?? null,
-              });
-            },
-            [client, queryClient],
-          ),
-          prefetchQuery: useCallback(
-            (queryKey, opts) => {
-              return queryClient.prefetchQuery({
-                ...opts,
-                queryKey,
-                queryFn: () => client.query(...getClientArgs(queryKey, opts)),
-              });
-            },
-            [client, queryClient],
-          ),
-          prefetchInfiniteQuery: useCallback(
-            (queryKey, opts) => {
-              return queryClient.prefetchInfiniteQuery({
-                ...opts,
-                queryKey,
-                queryFn: ({ pageParam }) => {
-                  return client.query(
-                    ...getClientArgs(queryKey, opts, pageParam),
-                  );
-                },
-                initialPageParam: opts?.initialCursor ?? null,
-              });
-            },
-            [client, queryClient],
-          ),
-          ensureQueryData: useCallback(
-            (queryKey, opts) => {
-              return queryClient.ensureQueryData({
-                ...opts,
-                queryKey,
-                queryFn: () => client.query(...getClientArgs(queryKey, opts)),
-              });
-            },
-            [client, queryClient],
-          ),
-          invalidateQueries: useCallback(
-            (queryKey, filters, options) => {
-              return queryClient.invalidateQueries(
-                {
-                  ...filters,
-                  queryKey,
-                },
-                options,
-              );
-            },
-            [queryClient],
-          ),
-          resetQueries: useCallback(
-            (queryKey, filters, options) => {
-              return queryClient.resetQueries(
-                {
-                  ...filters,
-                  queryKey,
-                },
-                options,
-              );
-            },
-            [queryClient],
-          ),
-          refetchQueries: useCallback(
-            (queryKey, filters, options) => {
-              return queryClient.refetchQueries(
-                {
-                  ...filters,
-                  queryKey,
-                },
-                options,
-              );
-            },
-            [queryClient],
-          ),
-          cancelQuery: useCallback(
-            (queryKey, options) => {
-              return queryClient.cancelQueries(
-                {
-                  queryKey,
-                },
-                options,
-              );
-            },
-            [queryClient],
-          ),
-          setQueryData: useCallback(
-            (queryKey, updater, options) => {
-              return queryClient.setQueryData(
-                queryKey,
-                updater as any,
-                options,
-              );
-            },
-            [queryClient],
-          ),
-          getQueryData: useCallback(
-            (queryKey) => {
-              return queryClient.getQueryData(queryKey);
-            },
-            [queryClient],
-          ),
-          setInfiniteQueryData: useCallback(
-            (queryKey, updater, options) => {
-              return queryClient.setQueryData(
-                queryKey,
-                updater as any,
-                options,
-              );
-            },
-            [queryClient],
-          ),
-          getInfiniteQueryData: useCallback(
-            (queryKey) => {
-              return queryClient.getQueryData(queryKey);
-            },
-            [queryClient],
-          ),
-        }}
-      >
-        {props.children}
-      </Context.Provider>
+      <Context.Provider value={contextValue}>{props.children}</Context.Provider>
     );
   };
 
@@ -272,11 +144,14 @@ export function createRootHooks<
 
     const defaultOpts = queryClient.getQueryDefaults(queryKey);
 
+    const isInputSkipToken = input === skipToken;
+
     if (
       typeof window === 'undefined' &&
       ssrState === 'prepass' &&
       opts?.trpc?.ssr !== false &&
       (opts?.enabled ?? defaultOpts?.enabled) !== false &&
+      !isInputSkipToken &&
       !queryClient.getQueryCache().find({ queryKey })
     ) {
       void prefetchQuery(queryKey, opts as any);
@@ -293,25 +168,27 @@ export function createRootHooks<
       {
         ...ssrOpts,
         queryKey: queryKey as any,
-        queryFn: (queryFunctionContext) => {
-          const actualOpts = {
-            ...ssrOpts,
-            trpc: {
-              ...ssrOpts?.trpc,
-              ...(shouldAbortOnUnmount
-                ? { signal: queryFunctionContext.signal }
-                : {}),
-            },
-          };
+        queryFn: isInputSkipToken
+          ? input
+          : (queryFunctionContext) => {
+              const actualOpts = {
+                ...ssrOpts,
+                trpc: {
+                  ...ssrOpts?.trpc,
+                  ...(shouldAbortOnUnmount
+                    ? { signal: queryFunctionContext.signal }
+                    : {}),
+                },
+              };
 
-          return client.query(...getClientArgs(queryKey, actualOpts));
-        },
+              return client.query(...getClientArgs(queryKey, actualOpts));
+            },
       },
       queryClient,
     ) as UseTRPCQueryResult<unknown, TError>;
 
     hook.trpc = useHookResult({
-      path: path.join('.'),
+      path,
     });
 
     return hook;
@@ -350,7 +227,7 @@ export function createRootHooks<
     ) as UseTRPCQueryResult<unknown, TError>;
 
     hook.trpc = useHookResult({
-      path: path.join('.'),
+      path,
     });
 
     return [hook.data, hook as any];
@@ -388,7 +265,7 @@ export function createRootHooks<
     ) as UseTRPCMutationResult<unknown, TError, unknown, unknown>;
 
     hook.trpc = useHookResult({
-      path: path.join('.'),
+      path,
     });
 
     return hook;
@@ -404,10 +281,10 @@ export function createRootHooks<
     const queryKey = hashKey(getQueryKeyInternal(path, input, 'any'));
     const { client } = useContext();
 
-    const optsRef = useRef<typeof opts>(opts);
+    const optsRef = React.useRef<typeof opts>(opts);
     optsRef.current = opts;
 
-    useEffect(() => {
+    React.useEffect(() => {
       if (!enabled) {
         return;
       }
@@ -457,11 +334,14 @@ export function createRootHooks<
 
     const defaultOpts = queryClient.getQueryDefaults(queryKey);
 
+    const isInputSkipToken = input === skipToken;
+
     if (
       typeof window === 'undefined' &&
       ssrState === 'prepass' &&
       opts?.trpc?.ssr !== false &&
       (opts?.enabled ?? defaultOpts?.enabled) !== false &&
+      !isInputSkipToken &&
       !queryClient.getQueryCache().find({ queryKey })
     ) {
       void prefetchInfiniteQuery(queryKey, { ...defaultOpts, ...opts } as any);
@@ -481,31 +361,33 @@ export function createRootHooks<
         initialPageParam: opts.initialCursor ?? null,
         persister: opts.persister,
         queryKey: queryKey as any,
-        queryFn: (queryFunctionContext) => {
-          const actualOpts = {
-            ...ssrOpts,
-            trpc: {
-              ...ssrOpts?.trpc,
-              ...(shouldAbortOnUnmount
-                ? { signal: queryFunctionContext.signal }
-                : {}),
+        queryFn: isInputSkipToken
+          ? input
+          : (queryFunctionContext) => {
+              const actualOpts = {
+                ...ssrOpts,
+                trpc: {
+                  ...ssrOpts?.trpc,
+                  ...(shouldAbortOnUnmount
+                    ? { signal: queryFunctionContext.signal }
+                    : {}),
+                },
+              };
+
+              return client.query(
+                ...getClientArgs(queryKey, actualOpts, {
+                  pageParam:
+                    queryFunctionContext.pageParam ?? opts.initialCursor,
+                  direction: queryFunctionContext.direction,
+                }),
+              );
             },
-          };
-
-          return client.query(
-            ...getClientArgs(
-              queryKey,
-              actualOpts,
-              queryFunctionContext.pageParam ?? opts.initialCursor,
-            ),
-          );
-        },
       },
       queryClient,
     ) as UseTRPCInfiniteQueryResult<unknown, TError, unknown>;
 
     hook.trpc = useHookResult({
-      path: path.join('.'),
+      path,
     });
     return hook;
   }
@@ -546,11 +428,10 @@ export function createRootHooks<
           };
 
           return context.client.query(
-            ...getClientArgs(
-              queryKey,
-              actualOpts,
-              queryFunctionContext.pageParam ?? opts.initialCursor,
-            ),
+            ...getClientArgs(queryKey, actualOpts, {
+              pageParam: queryFunctionContext.pageParam ?? opts.initialCursor,
+              direction: queryFunctionContext.direction,
+            }),
           );
         },
       },
@@ -558,7 +439,7 @@ export function createRootHooks<
     ) as UseTRPCInfiniteQueryResult<unknown, TError, unknown>;
 
     hook.trpc = useHookResult({
-      path: path.join('.'),
+      path,
     });
 
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -595,18 +476,26 @@ export function createRootHooks<
     );
   };
 
-  const useDehydratedState: UseDehydratedState<TRouter> = (
-    client,
-    trpcState,
+  const useSuspenseQueries: TRPCUseSuspenseQueries<TRouter> = (
+    queriesCallback,
   ) => {
-    const transformed: DehydratedState | undefined = useMemo(() => {
-      if (!trpcState) {
-        return trpcState;
-      }
+    const { queryClient, client } = useContext();
 
-      return client.runtime.transformer.deserialize(trpcState);
-    }, [trpcState, client]);
-    return transformed;
+    const proxy = createUseQueries(client);
+
+    const queries = queriesCallback(proxy);
+
+    const hook = __useSuspenseQueries(
+      {
+        queries: queries.map((query) => ({
+          ...query,
+          queryKey: (query as TRPCQueryOptions<any, any>).queryKey,
+        })),
+      },
+      queryClient,
+    );
+
+    return [hook.map((h) => h.data), hook] as any;
   };
 
   return {
@@ -617,33 +506,13 @@ export function createRootHooks<
     useQuery,
     useSuspenseQuery,
     useQueries,
+    useSuspenseQueries,
     useMutation,
     useSubscription,
-    useDehydratedState,
     useInfiniteQuery,
     useSuspenseInfiniteQuery,
   };
 }
-/* istanbul ignore next */
-/**
- * Hack to infer the type of `createReactQueryHooks`
- * @link https://stackoverflow.com/a/59072991
- */
-class GnClass<TRouter extends AnyRouter, TSSRContext = unknown> {
-  fn() {
-    return createRootHooks<TRouter, TSSRContext>();
-  }
-}
-
-type returnTypeInferer<TType> = TType extends (
-  a: Record<string, string>,
-) => infer U
-  ? U
-  : never;
-type fooType<TRouter extends AnyRouter, TSSRContext = unknown> = GnClass<
-  TRouter,
-  TSSRContext
->['fn'];
 
 /**
  * Infer the type of a `createReactQueryHooks` function
@@ -652,4 +521,4 @@ type fooType<TRouter extends AnyRouter, TSSRContext = unknown> = GnClass<
 export type CreateReactQueryHooks<
   TRouter extends AnyRouter,
   TSSRContext = unknown,
-> = returnTypeInferer<fooType<TRouter, TSSRContext>>;
+> = ReturnType<typeof createRootHooks<TRouter, TSSRContext>>;

package/src/shared/hooks/types.ts

@@ -1,4 +1,4 @@
-import {
+import type {
   DefinedUseQueryResult,
   DehydratedState,
   InfiniteData,
@@ -17,16 +17,18 @@ import {
   UseSuspenseQueryOptions,
   UseSuspenseQueryResult,
 } from '@tanstack/react-query';
-import {
+import type {
   CreateTRPCClientOptions,
   TRPCRequestOptions,
   TRPCUntypedClient,
 } from '@trpc/client';
-import { AnyRouter, DistributiveOmit } from '@trpc/server';
-import { ReactNode } from 'react';
-import { TRPCContextProps } from '../../internals/context';
-import { TRPCQueryKey } from '../../internals/getQueryKey';
-import { TRPCHookResult } from '../../internals/useHookResult';
+import type {
+  AnyRouter,
+  DistributiveOmit,
+} from '@trpc/server/unstable-core-do-not-import';
+import type { ReactNode } from 'react';
+import type { TRPCContextProps } from '../../internals/context';
+import type { TRPCQueryKey } from '../../internals/getQueryKey';
 
 export type OutputWithCursor<TData, TCursor = any> = {
   cursor: TCursor | null;
@@ -223,3 +225,9 @@ export type UseTRPCSuspenseInfiniteQueryResult<TData, TError, TInput> = [
  */
 export type UseTRPCMutationResult<TData, TError, TVariables, TContext> =
   TRPCHookResult & UseMutationResult<TData, TError, TVariables, TContext>;
+
+export interface TRPCHookResult {
+  trpc: {
+    path: string;
+  };
+}

package/src/shared/index.ts

@@ -2,10 +2,13 @@ export * from './proxy/decorationProxy';
 export * from './proxy/utilsProxy';
 export * from './proxy/useQueriesProxy';
 export type {
-  DecoratedProcedureRecord,
+  DecorateRouterRecord,
   DecorateProcedure,
 } from '../createTRPCReact';
-export type { TRPCUseQueries } from '../internals/useQueries';
+export type {
+  TRPCUseQueries,
+  TRPCUseSuspenseQueries,
+} from '../internals/useQueries';
 export * from './hooks/createRootHooks';
 export * from './queryClient';
 export * from './types';

package/src/shared/polymorphism/mutationLike.ts

@@ -1,6 +1,10 @@
-import { AnyProcedure, AnyRootConfig, inferProcedureInput } from '@trpc/server';
-import { inferTransformedProcedureOutput } from '@trpc/server/shared';
-import {
+import type {
+  AnyProcedure,
+  AnyRootTypes,
+  inferProcedureInput,
+  inferTransformedProcedureOutput,
+} from '@trpc/server/unstable-core-do-not-import';
+import type {
   InferMutationOptions,
   InferMutationResult,
 } from '../../utils/inferReactQueryProcedure';
@@ -9,26 +13,28 @@ import {
  * Use to describe a mutation route which matches a given mutation procedure's interface
  */
 export type MutationLike<
-  TConfig extends AnyRootConfig = AnyRootConfig,
-  TProcedure extends AnyProcedure = AnyProcedure,
+  TRoot extends AnyRootTypes,
+  TProcedure extends AnyProcedure,
 > = {
   useMutation: (
-    opts?: InferMutationOptions<TConfig, TProcedure>,
-  ) => InferMutationResult<TConfig, TProcedure>;
+    opts?: InferMutationOptions<TRoot, TProcedure>,
+  ) => InferMutationResult<TRoot, TProcedure>;
 };
 
 /**
  * Use to unwrap a MutationLike's input
  */
-export type InferMutationLikeInput<TMutationLike extends MutationLike> =
-  TMutationLike extends MutationLike<any, infer $Procedure>
-    ? inferProcedureInput<$Procedure>
-    : never;
+export type InferMutationLikeInput<
+  TMutationLike extends MutationLike<any, any>,
+> = TMutationLike extends MutationLike<any, infer $Procedure>
+  ? inferProcedureInput<$Procedure>
+  : never;
 
 /**
  * Use to unwrap a MutationLike's data output
  */
-export type InferMutationLikeData<TMutationLike extends MutationLike> =
-  TMutationLike extends MutationLike<infer TConfig, infer TProcedure>
-    ? inferTransformedProcedureOutput<TConfig, TProcedure>
-    : never;
+export type InferMutationLikeData<
+  TMutationLike extends MutationLike<any, any>,
+> = TMutationLike extends MutationLike<infer TRoot, infer TProcedure>
+  ? inferTransformedProcedureOutput<TRoot, TProcedure>
+  : never;

package/src/shared/polymorphism/queryLike.ts

@@ -1,37 +1,57 @@
-import { AnyProcedure, AnyRootConfig, inferProcedureInput } from '@trpc/server';
-import { inferTransformedProcedureOutput } from '@trpc/server/shared';
-import {
+import type { TRPCClientErrorLike } from '@trpc/client';
+import type {
+  AnyProcedure,
+  AnyRootTypes,
+  inferProcedureInput,
+  inferProcedureOutput,
+  inferTransformedProcedureOutput,
+} from '@trpc/server/unstable-core-do-not-import';
+import type { DecoratedQuery } from '../../createTRPCReact';
+import type {
   InferQueryOptions,
   InferQueryResult,
 } from '../../utils/inferReactQueryProcedure';
+import type { UseTRPCSuspenseQueryResult } from '../hooks/types';
 
 /**
  * Use to request a query route which matches a given query procedure's interface
  */
 export type QueryLike<
-  TConfig extends AnyRootConfig = AnyRootConfig,
-  TProcedure extends AnyProcedure = AnyProcedure,
+  TRoot extends AnyRootTypes,
+  TProcedure extends AnyProcedure,
 > = {
   useQuery: (
     variables: inferProcedureInput<TProcedure>,
-    opts?: InferQueryOptions<TConfig, TProcedure, any>,
-  ) => InferQueryResult<TConfig, TProcedure>;
+    opts?: InferQueryOptions<TRoot, TProcedure, any>,
+  ) => InferQueryResult<TRoot, TProcedure>;
+
+  useSuspenseQuery: (
+    variables: inferProcedureInput<TProcedure>,
+    opts?: InferQueryOptions<TRoot, TProcedure, any>,
+  ) => UseTRPCSuspenseQueryResult<
+    inferProcedureOutput<TProcedure>,
+    TRPCClientErrorLike<TRoot>
+  >;
 };
 
 /**
  * Use to unwrap a QueryLike's input
  */
-export type InferQueryLikeInput<
-  TQueryLike extends QueryLike<AnyRootConfig, AnyProcedure>,
-> = TQueryLike extends QueryLike<any, infer TProcedure>
+export type InferQueryLikeInput<TQueryLike> = TQueryLike extends DecoratedQuery<
+  infer $Def
+>
+  ? $Def['input']
+  : TQueryLike extends QueryLike<any, infer TProcedure>
   ? inferProcedureInput<TProcedure>
   : never;
 
 /**
  * Use to unwrap a QueryLike's data output
  */
-export type InferQueryLikeData<
-  TQueryLike extends QueryLike<AnyRootConfig, AnyProcedure>,
-> = TQueryLike extends QueryLike<infer TConfig, infer TProcedure>
-  ? inferTransformedProcedureOutput<TConfig, TProcedure>
+export type InferQueryLikeData<TQueryLike> = TQueryLike extends DecoratedQuery<
+  infer $Def
+>
+  ? $Def['output']
+  : TQueryLike extends QueryLike<infer TRoot, infer TProcedure>
+  ? inferTransformedProcedureOutput<TRoot, TProcedure>
   : never;