@trpc/react-query 10.0.0-rc.6 → 10.0.0-rc.8

package/dist/ssg/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var reactQuery = require('@tanstack/react-query');
 var server = require('@trpc/server');
-var getArrayQueryKey = require('../getArrayQueryKey-5ab807a3.js');
+var getArrayQueryKey = require('../getArrayQueryKey-24927615.js');
 var shared = require('@trpc/server/shared');
 require('@trpc/client');
 require('react');
@@ -18,7 +18,7 @@ var queryClient = require('../queryClient-358a9a75.js');
     const queryClient$1 = queryClient.getQueryClient(opts);
     const serialize = transformer ? ('input' in transformer ? transformer.input : transformer).serialize : (obj)=>obj;
     const prefetchQuery = async (...pathAndInput)=>{
-        return queryClient$1.prefetchQuery(getArrayQueryKey.getArrayQueryKey(pathAndInput), ()=>{
+        return queryClient$1.prefetchQuery(getArrayQueryKey.getArrayQueryKey(pathAndInput, 'query'), ()=>{
             return server.callProcedure({
                 procedures: router._def.procedures,
                 path: pathAndInput[0],
@@ -29,7 +29,7 @@ var queryClient = require('../queryClient-358a9a75.js');
         });
     };
     const prefetchInfiniteQuery = async (...pathAndInput)=>{
-        return queryClient$1.prefetchInfiniteQuery(getArrayQueryKey.getArrayQueryKey(pathAndInput), ()=>{
+        return queryClient$1.prefetchInfiniteQuery(getArrayQueryKey.getArrayQueryKey(pathAndInput, 'infinite'), ()=>{
             return server.callProcedure({
                 procedures: router._def.procedures,
                 path: pathAndInput[0],
@@ -40,7 +40,7 @@ var queryClient = require('../queryClient-358a9a75.js');
         });
     };
     const fetchQuery = async (...pathAndInput)=>{
-        return queryClient$1.fetchQuery(getArrayQueryKey.getArrayQueryKey(pathAndInput), ()=>{
+        return queryClient$1.fetchQuery(getArrayQueryKey.getArrayQueryKey(pathAndInput, 'query'), ()=>{
             return server.callProcedure({
                 procedures: router._def.procedures,
                 path: pathAndInput[0],
@@ -51,7 +51,7 @@ var queryClient = require('../queryClient-358a9a75.js');
         });
     };
     const fetchInfiniteQuery = async (...pathAndInput)=>{
-        return queryClient$1.fetchInfiniteQuery(getArrayQueryKey.getArrayQueryKey(pathAndInput), ()=>{
+        return queryClient$1.fetchInfiniteQuery(getArrayQueryKey.getArrayQueryKey(pathAndInput, 'infinite'), ()=>{
             return server.callProcedure({
                 procedures: router._def.procedures,
                 path: pathAndInput[0],

package/dist/ssg/index.mjs

@@ -1,6 +1,6 @@
 import { dehydrate } from '@tanstack/react-query';
 import { callProcedure } from '@trpc/server';
-import { g as getArrayQueryKey } from '../getArrayQueryKey-e56d8d64.mjs';
+import { g as getArrayQueryKey } from '../getArrayQueryKey-c6f6badf.mjs';
 import { createFlatProxy, createRecursiveProxy } from '@trpc/server/shared';
 import '@trpc/client';
 import 'react';
@@ -14,7 +14,7 @@ import { g as getQueryClient } from '../queryClient-4d766c0c.mjs';
     const queryClient = getQueryClient(opts);
     const serialize = transformer ? ('input' in transformer ? transformer.input : transformer).serialize : (obj)=>obj;
     const prefetchQuery = async (...pathAndInput)=>{
-        return queryClient.prefetchQuery(getArrayQueryKey(pathAndInput), ()=>{
+        return queryClient.prefetchQuery(getArrayQueryKey(pathAndInput, 'query'), ()=>{
             return callProcedure({
                 procedures: router._def.procedures,
                 path: pathAndInput[0],
@@ -25,7 +25,7 @@ import { g as getQueryClient } from '../queryClient-4d766c0c.mjs';
         });
     };
     const prefetchInfiniteQuery = async (...pathAndInput)=>{
-        return queryClient.prefetchInfiniteQuery(getArrayQueryKey(pathAndInput), ()=>{
+        return queryClient.prefetchInfiniteQuery(getArrayQueryKey(pathAndInput, 'infinite'), ()=>{
             return callProcedure({
                 procedures: router._def.procedures,
                 path: pathAndInput[0],
@@ -36,7 +36,7 @@ import { g as getQueryClient } from '../queryClient-4d766c0c.mjs';
         });
     };
     const fetchQuery = async (...pathAndInput)=>{
-        return queryClient.fetchQuery(getArrayQueryKey(pathAndInput), ()=>{
+        return queryClient.fetchQuery(getArrayQueryKey(pathAndInput, 'query'), ()=>{
             return callProcedure({
                 procedures: router._def.procedures,
                 path: pathAndInput[0],
@@ -47,7 +47,7 @@ import { g as getQueryClient } from '../queryClient-4d766c0c.mjs';
         });
     };
     const fetchInfiniteQuery = async (...pathAndInput)=>{
-        return queryClient.fetchInfiniteQuery(getArrayQueryKey(pathAndInput), ()=>{
+        return queryClient.fetchInfiniteQuery(getArrayQueryKey(pathAndInput, 'infinite'), ()=>{
             return callProcedure({
                 procedures: router._def.procedures,
                 path: pathAndInput[0],

package/dist/ssg/ssg.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ssg.d.ts","sourceRoot":"","sources":["../../src/ssg/ssg.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,eAAe,EACf,YAAY,EAEb,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EACL,SAAS,EACT,4BAA4B,EAG5B,oBAAoB,EACpB,kBAAkB,EACnB,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAE,gCAAgC,EAAkB,MAAM,WAAW,CAAC;AAE7E,UAAU,2BAA2B,CAAC,OAAO,SAAS,SAAS;IAC7D,MAAM,EAAE,OAAO,CAAC;IAChB,GAAG,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACjC,WAAW,CAAC,EAAE,4BAA4B,CAAC;CAC5C;AACD,oBAAY,uBAAuB,CAAC,OAAO,SAAS,SAAS,IAC3D,2BAA2B,CAAC,OAAO,CAAC,GAAG,gCAAgC,CAAC;AAE1E;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,SAAS,SAAS,EACxD,IAAI,EAAE,uBAAuB,CAAC,OAAO,CAAC;;;;;uBAuF9B,gBAAgB,KAMrB,eAAe;;EAcnB"}
+{"version":3,"file":"ssg.d.ts","sourceRoot":"","sources":["../../src/ssg/ssg.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,eAAe,EACf,YAAY,EAEb,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EACL,SAAS,EACT,4BAA4B,EAG5B,oBAAoB,EACpB,kBAAkB,EACnB,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAE,gCAAgC,EAAkB,MAAM,WAAW,CAAC;AAE7E,UAAU,2BAA2B,CAAC,OAAO,SAAS,SAAS;IAC7D,MAAM,EAAE,OAAO,CAAC;IAChB,GAAG,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACjC,WAAW,CAAC,EAAE,4BAA4B,CAAC;CAC5C;AACD,oBAAY,uBAAuB,CAAC,OAAO,SAAS,SAAS,IAC3D,2BAA2B,CAAC,OAAO,CAAC,GAAG,gCAAgC,CAAC;AAE1E;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,SAAS,SAAS,EACxD,IAAI,EAAE,uBAAuB,CAAC,OAAO,CAAC;;;;;uBA6F9B,gBAAgB,KAMrB,eAAe;;EAcnB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trpc/react-query",
-  "version": "10.0.0-rc.6",
+  "version": "10.0.0-rc.8",
   "description": "tRPC React lib",
   "author": "KATT",
   "license": "MIT",
@@ -54,19 +54,19 @@
   },
   "peerDependencies": {
     "@tanstack/react-query": "^4.3.8",
-    "@trpc/client": "10.0.0-rc.6",
-    "@trpc/server": "10.0.0-rc.6",
+    "@trpc/client": "10.0.0-rc.8",
+    "@trpc/server": "10.0.0-rc.8",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
   "devDependencies": {
     "@tanstack/react-query": "^4.3.8",
-    "@trpc/client": "10.0.0-rc.6",
-    "@trpc/server": "10.0.0-rc.6",
+    "@trpc/client": "10.0.0-rc.8",
+    "@trpc/server": "10.0.0-rc.8",
     "@types/express": "^4.17.12",
     "@types/node": "^18.7.20",
     "express": "^4.17.1",
-    "next": "^12.3.1",
+    "next": "^13.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rollup": "^2.79.1",
@@ -76,5 +76,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "9ec752b68e28a45e0278fdc13c5318bc7403eb74"
+  "gitHead": "5b8ff0d8d49251aa8c287e9d68641810cd9964e2"
 }

package/src/createTRPCReact.tsx

@@ -1,3 +1,4 @@
+import { InfiniteData } from '@tanstack/react-query';
 import { TRPCClientErrorLike } from '@trpc/client';
 import {
   AnyMutationProcedure,
@@ -24,10 +25,12 @@ import {
   UseDehydratedState,
   UseTRPCInfiniteQueryOptions,
   UseTRPCInfiniteQueryResult,
+  UseTRPCInfiniteQuerySuccessResult,
   UseTRPCMutationOptions,
   UseTRPCMutationResult,
   UseTRPCQueryOptions,
   UseTRPCQueryResult,
+  UseTRPCQuerySuccessResult,
   UseTRPCSubscriptionOptions,
   createHooksInternal,
 } from './shared/hooks/createHooksInternal';
@@ -38,6 +41,7 @@ import { CreateTRPCReactOptions } from './shared/types';
  */
 export type DecorateProcedure<
   TProcedure extends AnyProcedure,
+  TFlags,
   TPath extends string,
 > = TProcedure extends AnyQueryProcedure
   ? {
@@ -71,8 +75,55 @@ export type DecorateProcedure<
             TData,
             TRPCClientErrorLike<TProcedure>
           >;
-        }
-      : {})
+        } & (TFlags extends 'ExperimentalSuspense'
+          ? {
+              useSuspenseInfiniteQuery: <
+                _TQueryFnData = inferProcedureOutput<TProcedure>,
+                TData = inferProcedureOutput<TProcedure>,
+              >(
+                input: Omit<inferProcedureInput<TProcedure>, 'cursor'>,
+                opts?: Omit<
+                  UseTRPCInfiniteQueryOptions<
+                    TPath,
+                    inferProcedureInput<TProcedure>,
+                    TData,
+                    TRPCClientErrorLike<TProcedure>
+                  >,
+                  'enabled' | 'suspense'
+                >,
+              ) => [
+                InfiniteData<TData>,
+                UseTRPCInfiniteQuerySuccessResult<
+                  TData,
+                  TRPCClientErrorLike<TProcedure>
+                >,
+              ];
+            }
+          : {})
+      : {}) &
+      (TFlags extends 'ExperimentalSuspense'
+        ? {
+            useSuspenseQuery: <
+              TQueryFnData = inferProcedureOutput<TProcedure>,
+              TData = inferProcedureOutput<TProcedure>,
+            >(
+              input: inferProcedureInput<TProcedure>,
+              opts?: Omit<
+                UseTRPCQueryOptions<
+                  TPath,
+                  inferProcedureInput<TProcedure>,
+                  TQueryFnData,
+                  TData,
+                  TRPCClientErrorLike<TProcedure>
+                >,
+                'enabled' | 'suspense'
+              >,
+            ) => [
+              TData,
+              UseTRPCQuerySuccessResult<TData, TRPCClientErrorLike<TProcedure>>,
+            ];
+          }
+        : {})
   : TProcedure extends AnyMutationProcedure
   ? {
       useMutation: <TContext = unknown>(
@@ -106,24 +157,26 @@ export type DecorateProcedure<
  */
 export type DecoratedProcedureRecord<
   TProcedures extends ProcedureRouterRecord,
+  TFlags,
   TPath extends string = '',
 > = {
   [TKey in keyof TProcedures]: TProcedures[TKey] extends AnyRouter
     ? DecoratedProcedureRecord<
         TProcedures[TKey]['_def']['record'],
+        TFlags,
         `${TPath}${TKey & string}.`
       >
     : TProcedures[TKey] extends AnyProcedure
-    ? DecorateProcedure<TProcedures[TKey], `${TPath}${TKey & string}`>
+    ? DecorateProcedure<TProcedures[TKey], TFlags, `${TPath}${TKey & string}`>
     : never;
 };
 
-export type CreateTRPCReact<TRouter extends AnyRouter, TSSRContext> = {
+export type CreateTRPCReact<TRouter extends AnyRouter, TSSRContext, TFlags> = {
   useContext(): CreateReactUtilsProxy<TRouter, TSSRContext>;
   Provider: TRPCProvider<TRouter, TSSRContext>;
   createClient: CreateClient<TRouter>;
   useDehydratedState: UseDehydratedState<TRouter>;
-} & DecoratedProcedureRecord<TRouter['_def']['record']>;
+} & DecoratedProcedureRecord<TRouter['_def']['record'], TFlags>;
 
 /**
  * @internal
@@ -131,8 +184,9 @@ export type CreateTRPCReact<TRouter extends AnyRouter, TSSRContext> = {
 export function createHooksInternalProxy<
   TRouter extends AnyRouter,
   TSSRContext = unknown,
+  TFlags = null,
 >(trpc: CreateReactQueryHooks<TRouter, TSSRContext>) {
-  type CreateHooksInternalProxy = CreateTRPCReact<TRouter, TSSRContext>;
+  type CreateHooksInternalProxy = CreateTRPCReact<TRouter, TSSRContext, TFlags>;
 
   return createFlatProxy<CreateHooksInternalProxy>((key) => {
     if (key === 'useContext') {
@@ -156,9 +210,10 @@ export function createHooksInternalProxy<
 export function createTRPCReact<
   TRouter extends AnyRouter,
   TSSRContext = unknown,
+  TFlags = null,
 >(opts?: CreateTRPCReactOptions<TRouter>) {
   const hooks = createHooksInternal<TRouter, TSSRContext>(opts);
-  const proxy = createHooksInternalProxy<TRouter, TSSRContext>(hooks);
+  const proxy = createHooksInternalProxy<TRouter, TSSRContext, TFlags>(hooks);
 
   return proxy;
 }

package/src/internals/getArrayQueryKey.test.ts

@@ -1,41 +1,76 @@
 import { getArrayQueryKey } from './getArrayQueryKey';
 
 test('getArrayQueryKey', () => {
-  expect(getArrayQueryKey('foo')).toMatchInlineSnapshot(`
+  expect(getArrayQueryKey('foo', 'query')).toMatchInlineSnapshot(`
     Array [
       Array [
         "foo",
       ],
+      Object {
+        "type": "query",
+      },
     ]
   `);
-  expect(getArrayQueryKey(['foo'])).toMatchInlineSnapshot(`
+  expect(getArrayQueryKey(['foo'], 'query')).toMatchInlineSnapshot(`
     Array [
       Array [
         "foo",
       ],
+      Object {
+        "type": "query",
+      },
     ]
   `);
-  expect(getArrayQueryKey(['foo', 'bar'])).toMatchInlineSnapshot(`
+  expect(getArrayQueryKey('foo', 'infinite')).toMatchInlineSnapshot(`
     Array [
       Array [
         "foo",
       ],
-      "bar",
+      Object {
+        "type": "infinite",
+      },
     ]
   `);
-  expect(getArrayQueryKey([undefined, 'bar'])).toMatchInlineSnapshot(`
+  expect(getArrayQueryKey(['foo'], 'infinite')).toMatchInlineSnapshot(`
+    Array [
+      Array [
+        "foo",
+      ],
+      Object {
+        "type": "infinite",
+      },
+    ]
+  `);
+  expect(getArrayQueryKey(['foo', 'bar'], 'query')).toMatchInlineSnapshot(`
+    Array [
+      Array [
+        "foo",
+      ],
+      Object {
+        "input": "bar",
+        "type": "query",
+      },
+    ]
+  `);
+  expect(getArrayQueryKey([undefined, 'bar'], 'query')).toMatchInlineSnapshot(`
     Array [
       Array [],
-      "bar",
+      Object {
+        "input": "bar",
+        "type": "query",
+      },
     ]
   `);
-  expect(getArrayQueryKey(['post.byId', '1'])).toMatchInlineSnapshot(`
+  expect(getArrayQueryKey(['post.byId', '1'], 'query')).toMatchInlineSnapshot(`
     Array [
       Array [
         "post",
         "byId",
       ],
-      "1",
+      Object {
+        "input": "1",
+        "type": "query",
+      },
     ]
   `);
 });

package/src/internals/getArrayQueryKey.ts

@@ -1,3 +1,5 @@
+export type QueryType = 'query' | 'infinite' | '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
@@ -7,12 +9,22 @@
  */
 export function getArrayQueryKey(
   queryKey: string | [string] | [string, ...unknown[]] | unknown[],
-): [string[]] | [string[], ...unknown[]] | [] {
+  type: QueryType,
+): [string[], { input?: unknown; type?: Exclude<QueryType, 'any'> }] {
   const queryKeyArrayed = Array.isArray(queryKey) ? queryKey : [queryKey];
-  const [path, ...input] = queryKeyArrayed;
+  const [path, input] = queryKeyArrayed;
 
   const arrayPath =
     typeof path !== 'string' || path === '' ? [] : path.split('.');
 
-  return [arrayPath, ...input];
+  // Construct a query key that is easy to destructure and flexible for
+  // partial selecting etc.
+  // https://github.com/trpc/trpc/issues/3128
+  return [
+    arrayPath,
+    {
+      ...(input && { input: input }),
+      ...(type && type !== 'any' && { type: type }),
+    },
+  ];
 }

package/src/interop.ts

@@ -13,13 +13,14 @@ import {
 export function createReactQueryHooks<
   TRouter extends AnyRouter,
   TSSRContext = unknown,
+  TFlags = null,
 >(
   opts?: CreateTRPCReactOptions<TRouter>,
 ): CreateReactQueryHooks<TRouter, TSSRContext> & {
-  proxy: CreateTRPCReact<TRouter, TSSRContext>;
+  proxy: CreateTRPCReact<TRouter, TSSRContext, TFlags>;
 } {
   const trpc = createHooksInternal<TRouter, TSSRContext>(opts);
-  const proxy = createHooksInternalProxy<TRouter, TSSRContext>(trpc);
+  const proxy = createHooksInternalProxy<TRouter, TSSRContext, TFlags>(trpc);
 
   return {
     ...trpc,

package/src/shared/hooks/createHooksInternal.tsx

@@ -1,7 +1,9 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 import {
   DehydratedState,
+  InfiniteQueryObserverSuccessResult,
   QueryClient,
+  QueryObserverSuccessResult,
   UseInfiniteQueryOptions,
   UseInfiniteQueryResult,
   UseMutationOptions,
@@ -45,7 +47,7 @@ import {
   TRPCContextProps,
   TRPCContextState,
 } from '../../internals/context';
-import { getArrayQueryKey } from '../../internals/getArrayQueryKey';
+import { QueryType, getArrayQueryKey } from '../../internals/getArrayQueryKey';
 import { CreateTRPCReactOptions, UseMutationOverride } from '../types';
 
 export type OutputWithCursor<TData, TCursor = any> = {
@@ -157,6 +159,11 @@ interface TRPCHookResult {
 export type UseTRPCQueryResult<TData, TError> = UseQueryResult<TData, TError> &
   TRPCHookResult;
 
+/**
+ * @internal
+ */
+export type UseTRPCQuerySuccessResult<TData, TError> =
+  QueryObserverSuccessResult<TData, TError> & TRPCHookResult;
 /**
  * @internal
  */
@@ -166,6 +173,12 @@ export type UseTRPCInfiniteQueryResult<TData, TError> = UseInfiniteQueryResult<
 > &
   TRPCHookResult;
 
+/**
+ * @internal
+ */
+export type UseTRPCInfiniteQuerySuccessResult<TData, TError> =
+  InfiniteQueryObserverSuccessResult<TData, TError> & TRPCHookResult;
+
 /**
  * @internal
  */
@@ -233,7 +246,7 @@ export function createHooksInternal<
           fetchQuery: useCallback(
             (pathAndInput, opts) => {
               return queryClient.fetchQuery(
-                getArrayQueryKey(pathAndInput),
+                getArrayQueryKey(pathAndInput, 'query'),
                 () =>
                   (client as any).query(...getClientArgs(pathAndInput, opts)),
                 opts,
@@ -244,7 +257,7 @@ export function createHooksInternal<
           fetchInfiniteQuery: useCallback(
             (pathAndInput, opts) => {
               return queryClient.fetchInfiniteQuery(
-                getArrayQueryKey(pathAndInput),
+                getArrayQueryKey(pathAndInput, 'infinite'),
                 ({ pageParam }) => {
                   const [path, input] = pathAndInput;
                   const actualInput = { ...(input as any), cursor: pageParam };
@@ -260,7 +273,7 @@ export function createHooksInternal<
           prefetchQuery: useCallback(
             (pathAndInput, opts) => {
               return queryClient.prefetchQuery(
-                getArrayQueryKey(pathAndInput),
+                getArrayQueryKey(pathAndInput, 'query'),
                 () =>
                   (client as any).query(...getClientArgs(pathAndInput, opts)),
                 opts,
@@ -271,7 +284,7 @@ export function createHooksInternal<
           prefetchInfiniteQuery: useCallback(
             (pathAndInput, opts) => {
               return queryClient.prefetchInfiniteQuery(
-                getArrayQueryKey(pathAndInput),
+                getArrayQueryKey(pathAndInput, 'infinite'),
                 ({ pageParam }) => {
                   const [path, input] = pathAndInput;
                   const actualInput = { ...(input as any), cursor: pageParam };
@@ -288,7 +301,7 @@ export function createHooksInternal<
             (...args: any[]) => {
               const [queryKey, ...rest] = args;
               return queryClient.invalidateQueries(
-                getArrayQueryKey(queryKey),
+                getArrayQueryKey(queryKey, 'any'),
                 ...rest,
               );
             },
@@ -299,7 +312,7 @@ export function createHooksInternal<
               const [queryKey, ...rest] = args;
 
               return queryClient.refetchQueries(
-                getArrayQueryKey(queryKey),
+                getArrayQueryKey(queryKey, 'any'),
                 ...rest,
               );
             },
@@ -307,7 +320,9 @@ export function createHooksInternal<
           ),
           cancelQuery: useCallback(
             (pathAndInput) => {
-              return queryClient.cancelQueries(getArrayQueryKey(pathAndInput));
+              return queryClient.cancelQueries(
+                getArrayQueryKey(pathAndInput, 'any'),
+              );
             },
             [queryClient],
           ),
@@ -315,7 +330,7 @@ export function createHooksInternal<
             (...args) => {
               const [queryKey, ...rest] = args;
               return queryClient.setQueryData(
-                getArrayQueryKey(queryKey),
+                getArrayQueryKey(queryKey, 'query'),
                 ...rest,
               );
             },
@@ -326,7 +341,7 @@ export function createHooksInternal<
               const [queryKey, ...rest] = args;
 
               return queryClient.getQueryData(
-                getArrayQueryKey(queryKey),
+                getArrayQueryKey(queryKey, 'query'),
                 ...rest,
               );
             },
@@ -337,7 +352,7 @@ export function createHooksInternal<
               const [queryKey, ...rest] = args;
 
               return queryClient.setQueryData(
-                getArrayQueryKey(queryKey),
+                getArrayQueryKey(queryKey, 'infinite'),
                 ...rest,
               );
             },
@@ -348,7 +363,7 @@ export function createHooksInternal<
               const [queryKey, ...rest] = args;
 
               return queryClient.getQueryData(
-                getArrayQueryKey(queryKey),
+                getArrayQueryKey(queryKey, 'infinite'),
                 ...rest,
               );
             },
@@ -371,12 +386,16 @@ export function createHooksInternal<
    */
   function useSSRQueryOptionsIfNeeded<
     TOptions extends { retryOnMount?: boolean } | undefined,
-  >(pathAndInput: unknown[], opts: TOptions): TOptions {
+  >(
+    pathAndInput: unknown[],
+    type: Exclude<QueryType, 'any'>,
+    opts: TOptions,
+  ): TOptions {
     const { queryClient, ssrState } = useContext();
     return ssrState &&
       ssrState !== 'mounted' &&
-      queryClient.getQueryCache().find(getArrayQueryKey(pathAndInput))?.state
-        .status === 'error'
+      queryClient.getQueryCache().find(getArrayQueryKey(pathAndInput, type))
+        ?.state.status === 'error'
       ? {
           retryOnMount: false,
           ...opts,
@@ -406,16 +425,16 @@ export function createHooksInternal<
       ssrState === 'prepass' &&
       opts?.trpc?.ssr !== false &&
       opts?.enabled !== false &&
-      !queryClient.getQueryCache().find(getArrayQueryKey(pathAndInput))
+      !queryClient.getQueryCache().find(getArrayQueryKey(pathAndInput, 'query'))
     ) {
       void prefetchQuery(pathAndInput as any, opts as any);
     }
-    const ssrOpts = useSSRQueryOptionsIfNeeded(pathAndInput, opts);
+    const ssrOpts = useSSRQueryOptionsIfNeeded(pathAndInput, 'query', opts);
     // request option should take priority over global
     const shouldAbortOnUnmount = opts?.trpc?.abortOnUnmount ?? abortOnUnmount;
 
     const hook = __useQuery(
-      getArrayQueryKey(pathAndInput) as any,
+      getArrayQueryKey(pathAndInput, 'query') as any,
       (queryFunctionContext) => {
         const actualOpts = {
           ...ssrOpts,
@@ -575,18 +594,20 @@ export function createHooksInternal<
       ssrState === 'prepass' &&
       opts?.trpc?.ssr !== false &&
       opts?.enabled !== false &&
-      !queryClient.getQueryCache().find(getArrayQueryKey(pathAndInput))
+      !queryClient
+        .getQueryCache()
+        .find(getArrayQueryKey(pathAndInput, 'infinite'))
     ) {
       void prefetchInfiniteQuery(pathAndInput as any, opts as any);
     }
 
-    const ssrOpts = useSSRQueryOptionsIfNeeded(pathAndInput, opts);
+    const ssrOpts = useSSRQueryOptionsIfNeeded(pathAndInput, 'infinite', opts);
 
     // request option should take priority over global
     const shouldAbortOnUnmount = opts?.trpc?.abortOnUnmount ?? abortOnUnmount;
 
     const hook = __useInfiniteQuery(
-      getArrayQueryKey(pathAndInput) as any,
+      getArrayQueryKey(pathAndInput, 'infinite') as any,
       (queryFunctionContext) => {
         const actualOpts = {
           ...ssrOpts,

package/src/shared/proxy/decorationProxy.ts

@@ -28,6 +28,17 @@ export function createReactProxyDecoration<
     const [input, ...rest] = args;
 
     const queryKey = getQueryKey(path, input);
+    if (lastArg.startsWith('useSuspense')) {
+      const opts = rest[0] || {};
+      const fn =
+        lastArg === 'useSuspenseQuery' ? 'useQuery' : 'useInfiniteQuery';
+      const result = (hooks as any)[fn](queryKey, {
+        ...opts,
+        suspense: true,
+        enabled: true,
+      });
+      return [result.data, result];
+    }
     return (hooks as any)[lastArg](queryKey, ...rest);
   });
 }