Suspense (v11)

Usage

`useSuspenseQuery()`

import { const trpc: CreateTRPCReactBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        all: QueryProcedure<{
            input: {
                cursor?: string | undefined;
            };
            output: {
                posts: {
                    id: string;
                    title: string;
                }[];
                nextCursor: string | undefined;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<{
            input: {
                id: string;
            };
            output: {
                id: string;
                title: string;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>, unknown> & DecorateRouterRecord<...>trpc } from '../utils/trpc';

function function PostView(): React.JSX.ElementPostView() {
  const [post, const postQuery: UseSuspenseQueryResult<{
    id: string;
    title: string;
}, TRPCClientErrorLike<{
    input: {
        id: string;
    };
    output: {
        id: string;
        title: string;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>> & TRPCHookResultpostQuery] = const trpc: CreateTRPCReactBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        all: QueryProcedure<{
            input: {
                cursor?: string | undefined;
            };
            output: {
                posts: {
                    id: string;
                    title: string;
                }[];
                nextCursor: string | undefined;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<{
            input: {
                id: string;
            };
            output: {
                id: string;
                title: string;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>, unknown> & DecorateRouterRecord<...>trpc.post: DecorateRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    all: QueryProcedure<{
        input: {
            cursor?: string | undefined;
        };
        output: {
            posts: {
                id: string;
                title: string;
            }[];
            nextCursor: string | undefined;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
    byId: QueryProcedure<{
        input: {
            id: string;
        };
        output: {
            id: string;
            title: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>post.byId: DecoratedQuery<{
    input: {
        id: string;
    };
    output: {
        id: string;
        title: string;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>byId.useSuspenseQuery: <{
    id: string;
    title: string;
}, {
    id: string;
    title: string;
}>(input: {
    id: string;
}, opts?: UseTRPCSuspenseQueryOptions<{
    id: string;
    title: string;
}, {
    id: string;
    title: string;
}, TRPCClientErrorLike<{
    input: {
        id: string;
    };
    output: {
        id: string;
        title: string;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>> | undefined) => [{
    id: string;
    title: string;
}, UseSuspenseQueryResult<{
    id: string;
    title: string;
}, TRPCClientErrorLike<{
    input: {
        id: string;
    };
    output: {
        id: string;
        title: string;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>> & TRPCHookResult]useSuspenseQuery({ id: stringid: '1' });         
const post: {
    id: string;
    title: string;
}

  return <>{/* ... */}</>;
}

`useSuspenseInfiniteQuery()`

import { const trpc: CreateTRPCReactBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        all: QueryProcedure<{
            input: {
                cursor?: string | undefined;
            };
            output: {
                posts: {
                    id: string;
                    title: string;
                }[];
                nextCursor: string | undefined;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<{
            input: {
                id: string;
            };
            output: {
                id: string;
                title: string;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>, unknown> & DecorateRouterRecord<...>trpc } from '../utils/trpc';
import type { PostPage } from '../server';

function function PostView(): React.JSX.ElementPostView() {
  const [{ const pages: {
    posts: {
        id: string;
        title: string;
    }[];
    nextCursor?: string | undefined;
}[]pages }, const allPostsQuery: TRPCHookResult & UseSuspenseInfiniteQueryResult<{
    pages: {
        posts: {
            id: string;
            title: string;
        }[];
        nextCursor?: string | undefined;
    }[];
    pageParams: (string | undefined)[];
}, TRPCClientErrorLike<{
    input: {
        cursor?: string | undefined;
    };
    output: {
        posts: {
            id: string;
            title: string;
        }[];
        nextCursor?: string | undefined;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>>allPostsQuery] = const trpc: CreateTRPCReactBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        all: QueryProcedure<{
            input: {
                cursor?: string | undefined;
            };
            output: {
                posts: {
                    id: string;
                    title: string;
                }[];
                nextCursor: string | undefined;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<{
            input: {
                id: string;
            };
            output: {
                id: string;
                title: string;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>, unknown> & DecorateRouterRecord<...>trpc.post: DecorateRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    all: QueryProcedure<{
        input: {
            cursor?: string | undefined;
        };
        output: {
            posts: {
                id: string;
                title: string;
            }[];
            nextCursor: string | undefined;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
    byId: QueryProcedure<{
        input: {
            id: string;
        };
        output: {
            id: string;
            title: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>post.all: DecoratedQuery<{
    input: {
        cursor?: string | undefined;
    };
    output: {
        posts: {
            id: string;
            title: string;
        }[];
        nextCursor?: string | undefined;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>all.useSuspenseInfiniteQuery: (input: InfiniteInput<{
    cursor?: string | undefined;
}>, opts: makeInfiniteQueryOptions<string | undefined, UseSuspenseInfiniteQueryOptions<{
    posts: {
        id: string;
        title: string;
    }[];
    nextCursor?: string | undefined;
}, TRPCClientErrorLike<{
    input: {
        cursor?: string | undefined;
    };
    output: {
        posts: {
            id: string;
            title: string;
        }[];
        nextCursor?: string | undefined;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>, {
    pages: {
        posts: {
            id: string;
            title: string;
        }[];
        nextCursor?: string | undefined;
    }[];
    pageParams: (string | undefined)[];
}, any, string | undefined>>) => [...]useSuspenseInfiniteQuery(
    {},
    {
      getNextPageParam: GetNextPageParamFunction<string | undefined, {
    posts: {
        id: string;
        title: string;
    }[];
    nextCursor?: string | undefined;
}>getNextPageParam(lastPage: PostPagelastPage: PostPage) {
        return lastPage: PostPagelastPage.PostPage.nextCursor?: string | undefinednextCursor;
      },
      initialCursor?: string | undefinedinitialCursor: '',
    },
  );

  const { const isFetching: booleanisFetching, const isFetchingNextPage: booleanisFetchingNextPage, const fetchNextPage: (options?: FetchNextPageOptions) => Promise<InfiniteQueryObserverResult<{
    pages: {
        posts: {
            id: string;
            title: string;
        }[];
        nextCursor?: string | undefined;
    }[];
    pageParams: (string | undefined)[];
}, TRPCClientErrorLike<{
    input: {
        cursor?: string | undefined;
    };
    output: {
        posts: {
            id: string;
            title: string;
        }[];
        nextCursor?: string | undefined;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>>>fetchNextPage, const hasNextPage: booleanhasNextPage } =
    const allPostsQuery: TRPCHookResult & UseSuspenseInfiniteQueryResult<{
    pages: {
        posts: {
            id: string;
            title: string;
        }[];
        nextCursor?: string | undefined;
    }[];
    pageParams: (string | undefined)[];
}, TRPCClientErrorLike<{
    input: {
        cursor?: string | undefined;
    };
    output: {
        posts: {
            id: string;
            title: string;
        }[];
        nextCursor?: string | undefined;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>>allPostsQuery;

  return <>{/* ... */}</>;
}

`useSuspenseQueries()`

Suspense equivalent of useQueries().

import { const trpc: CreateTRPCReactBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        all: QueryProcedure<{
            input: {
                cursor?: string | undefined;
            };
            output: {
                posts: {
                    id: string;
                    title: string;
                }[];
                nextCursor: string | undefined;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<{
            input: {
                id: string;
            };
            output: {
                id: string;
                title: string;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>, unknown> & DecorateRouterRecord<...>trpc } from '../utils/trpc';

const const Component: (props: {
    postIds: string[];
}) => React.JSX.ElementComponent = (props: {
    postIds: string[];
}props: { postIds: string[]postIds: string[] }) => {
  const [const posts: {
    id: string;
    title: string;
}[]posts, const postQueries: UseSuspenseQueryResult<{
    id: string;
    title: string;
}, TRPCClientError<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}>>[]postQueries] = const trpc: CreateTRPCReactBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        all: QueryProcedure<{
            input: {
                cursor?: string | undefined;
            };
            output: {
                posts: {
                    id: string;
                    title: string;
                }[];
                nextCursor: string | undefined;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<{
            input: {
                id: string;
            };
            output: {
                id: string;
                title: string;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>, unknown> & DecorateRouterRecord<...>trpc.useSuspenseQueries: <Omit<UseTRPCSuspenseQueryOptions<{
    id: string;
    title: string;
}, {
    id: string;
    title: string;
}, TRPCClientError<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}>>, "queryKey">[]>(queriesCallback: (t: UseSuspenseQueriesProcedureRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        all: QueryProcedure<{
            input: {
                cursor?: string | undefined;
            };
            output: {
                posts: {
                    ...;
                }[];
                nextCursor: string | undefined;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<...>;
    }>>;
}>>) => readonly Omit<...>[]) => SuspenseQueriesResults<...>useSuspenseQueries((t: UseSuspenseQueriesProcedureRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        all: QueryProcedure<{
            input: {
                cursor?: string | undefined;
            };
            output: {
                posts: {
                    id: string;
                    title: string;
                }[];
                nextCursor: string | undefined;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<{
            input: {
                id: string;
            };
            output: {
                id: string;
                title: string;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>t) =>
    props: {
    postIds: string[];
}props.postIds: string[]postIds.Array<string>.map<Omit<UseTRPCSuspenseQueryOptions<{
    id: string;
    title: string;
}, {
    id: string;
    title: string;
}, TRPCClientError<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}>>, "queryKey">>(callbackfn: (value: string, index: number, array: string[]) => Omit<UseTRPCSuspenseQueryOptions<{
    id: string;
    title: string;
}, {
    id: string;
    title: string;
}, TRPCClientError<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}>>, "queryKey">, thisArg?: any): Omit<...>[]map((id: stringid) => t: UseSuspenseQueriesProcedureRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        all: QueryProcedure<{
            input: {
                cursor?: string | undefined;
            };
            output: {
                posts: {
                    id: string;
                    title: string;
                }[];
                nextCursor: string | undefined;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<{
            input: {
                id: string;
            };
            output: {
                id: string;
                title: string;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>t.post: UseSuspenseQueriesProcedureRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    all: QueryProcedure<{
        input: {
            cursor?: string | undefined;
        };
        output: {
            posts: {
                id: string;
                title: string;
            }[];
            nextCursor: string | undefined;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
    byId: QueryProcedure<{
        input: {
            id: string;
        };
        output: {
            id: string;
            title: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>post.byId: <{
    id: string;
    title: string;
}>(input: {
    id: string;
}, opts?: Omit<UseTRPCSuspenseQueryOptions<{
    id: string;
    title: string;
}, {
    id: string;
    title: string;
}, TRPCClientError<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}>>, "queryKey"> | undefined) => Omit<UseTRPCSuspenseQueryOptions<{
    id: string;
    title: string;
}, {
    id: string;
    title: string;
}, TRPCClientError<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}>>, "queryKey">byId({ id: stringid })),
  );

  return <>{/* [...] */}</>;
};

Prefetching

The performance of suspense queries can be improved by prefetching the query data before the Suspense component is rendered (this is sometimes called "render-as-you-fetch").

Route-level prefetching

import { function createTRPCQueryUtils<TRouter extends AnyRouter>(opts: CreateQueryUtilsOptions<TRouter>): CreateQueryUtils<TRouter>createTRPCQueryUtils } from '@trpc/react-query';
import { function createTRPCClient<TRouter extends AnyRouter>(opts: CreateTRPCClientOptions<TRouter>): TRPCClient<TRouter>createTRPCClient, function httpBatchLink<TRouter extends AnyRouter>(opts: HTTPBatchLinkOptions<TRouter["_def"]["_config"]["$types"]>): TRPCLink<TRouter>httpBatchLink } from '@trpc/client';
import { class QueryClientQueryClient } from '@tanstack/react-query';
import type { type AppRouter = Router<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        all: QueryProcedure<{
            input: {
                cursor?: string | undefined;
            };
            output: {
                posts: {
                    id: string;
                    title: string;
                }[];
                nextCursor: string | undefined;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<{
            input: {
                id: string;
            };
            output: {
                id: string;
                title: string;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>> & DecorateCreateRouterOptions<...>AppRouter } from './server';

const const queryClient: QueryClientqueryClient = new new QueryClient(config?: QueryClientConfig): QueryClientQueryClient();
const const trpcClient: TRPCClient<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        all: QueryProcedure<{
            input: {
                cursor?: string | undefined;
            };
            output: {
                posts: {
                    id: string;
                    title: string;
                }[];
                nextCursor: string | undefined;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<{
            input: {
                id: string;
            };
            output: {
                id: string;
                title: string;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>>trpcClient = createTRPCClient<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        all: QueryProcedure<{
            input: {
                cursor?: string | undefined;
            };
            output: {
                posts: {
                    id: string;
                    title: string;
                }[];
                nextCursor: string | undefined;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<{
            input: {
                id: string;
            };
            output: {
                id: string;
                title: string;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>>(opts: CreateTRPCClientOptions<...>): TRPCClient<...>createTRPCClient<type AppRouter = Router<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        all: QueryProcedure<{
            input: {
                cursor?: string | undefined;
            };
            output: {
                posts: {
                    id: string;
                    title: string;
                }[];
                nextCursor: string | undefined;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<{
            input: {
                id: string;
            };
            output: {
                id: string;
                title: string;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>> & DecorateCreateRouterOptions<...>AppRouter>({ links: TRPCLink<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        all: QueryProcedure<{
            input: {
                cursor?: string | undefined;
            };
            output: {
                posts: {
                    id: string;
                    title: string;
                }[];
                nextCursor: string | undefined;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<{
            input: {
                id: string;
            };
            output: {
                id: string;
                title: string;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>>[]links: [httpBatchLink<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        all: QueryProcedure<{
            input: {
                cursor?: string | undefined;
            };
            output: {
                posts: {
                    id: string;
                    title: string;
                }[];
                nextCursor: string | undefined;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<{
            input: {
                id: string;
            };
            output: {
                id: string;
                title: string;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>>(opts: HTTPBatchLinkOptions<...>): TRPCLink<...>httpBatchLink({ url: string | URLurl: 'http://localhost:3000' })] });
const const utils: CreateQueryUtils<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        all: QueryProcedure<{
            input: {
                cursor?: string | undefined;
            };
            output: {
                posts: {
                    id: string;
                    title: string;
                }[];
                nextCursor: string | undefined;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<{
            input: {
                id: string;
            };
            output: {
                id: string;
                title: string;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>>utils = createTRPCQueryUtils<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        all: QueryProcedure<{
            input: {
                cursor?: string | undefined;
            };
            output: {
                posts: {
                    id: string;
                    title: string;
                }[];
                nextCursor: string | undefined;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<{
            input: {
                id: string;
            };
            output: {
                id: string;
                title: string;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>>(opts: CreateQueryUtilsOptions<...>): CreateQueryUtils<...>createTRPCQueryUtils({ CreateQueryUtilsOptions<TRouter extends AnyRouter>.queryClient: QueryClientqueryClient, CreateQueryUtilsOptions<BuiltRouter<{ ctx: object; meta: object; errorShape: DefaultErrorShape; transformer: false; }, DecorateCreateRouterOptions<{ post: BuiltRouter<{ ctx: object; meta: object; errorShape: DefaultErrorShape; transformer: false; }, DecorateCreateRouterOptions<...>>; }>>>.client: TRPCClient<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        all: QueryProcedure<{
            input: {
                cursor?: string | undefined;
            };
            output: {
                posts: {
                    id: string;
                    title: string;
                }[];
                nextCursor: string | undefined;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<{
            input: {
                id: string;
            };
            output: {
                id: string;
                title: string;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>> | TRPCUntypedClient<...>client: const trpcClient: TRPCClient<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        all: QueryProcedure<{
            input: {
                cursor?: string | undefined;
            };
            output: {
                posts: {
                    id: string;
                    title: string;
                }[];
                nextCursor: string | undefined;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<{
            input: {
                id: string;
            };
            output: {
                id: string;
                title: string;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>>trpcClient });

// tanstack router/ react router loader
const const loader: (params: {
    id: string;
}) => Promise<{
    id: string;
    title: string;
}>loader = async (params: {
    id: string;
}params: { id: stringid: string }) =>
  const utils: CreateQueryUtils<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        all: QueryProcedure<{
            input: {
                cursor?: string | undefined;
            };
            output: {
                posts: {
                    id: string;
                    title: string;
                }[];
                nextCursor: string | undefined;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<{
            input: {
                id: string;
            };
            output: {
                id: string;
                title: string;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>>utils.post: DecorateRouter & {
    all: DecorateQueryProcedure<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, QueryProcedure<{
        input: {
            cursor?: string | undefined;
        };
        output: {
            posts: {
                id: string;
                title: string;
            }[];
            nextCursor: string | undefined;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>>;
    byId: DecorateQueryProcedure<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, QueryProcedure<{
        input: {
            id: string;
        };
        output: {
            id: string;
            title: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>>;
}post.byId: DecorateQueryProcedure<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, QueryProcedure<{
    input: {
        id: string;
    };
    output: {
        id: string;
        title: string;
    };
    meta: object;
    errorShape: DefaultErrorShape;
}>>byId.function ensureData(input: {
    id: string;
}, opts?: TRPCFetchQueryOptions<{
    id: string;
    title: string;
}, TRPCClientError<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}>> | undefined): Promise<{
    id: string;
    title: string;
}>ensureData({ id: stringid: params: {
    id: string;
}params.id: stringid });

Component-level prefetching with `usePrefetchQuery`

import React, { const Suspense: React.ExoticComponent<React.SuspenseProps>Suspense } from 'react';
import { const trpc: CreateTRPCReactBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        all: QueryProcedure<{
            input: {
                cursor?: string | undefined;
            };
            output: {
                posts: {
                    id: string;
                    title: string;
                }[];
                nextCursor: string | undefined;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<{
            input: {
                id: string;
            };
            output: {
                id: string;
                title: string;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>, unknown> & DecorateRouterRecord<...>trpc } from '../utils/trpc';

function function PostView(props: {
    postId: string;
}): React.JSX.ElementPostView(props: {
    postId: string;
}props: { postId: stringpostId: string }) {
  return <></>;
}

function function PostViewPage(props: {
    postId: string;
}): React.JSX.ElementPostViewPage(props: {
    postId: string;
}props: { postId: stringpostId: string }) {
  const trpc: CreateTRPCReactBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        all: QueryProcedure<{
            input: {
                cursor?: string | undefined;
            };
            output: {
                posts: {
                    id: string;
                    title: string;
                }[];
                nextCursor: string | undefined;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<{
            input: {
                id: string;
            };
            output: {
                id: string;
                title: string;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>, unknown> & DecorateRouterRecord<...>trpc.post: DecorateRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    all: QueryProcedure<{
        input: {
            cursor?: string | undefined;
        };
        output: {
            posts: {
                id: string;
                title: string;
            }[];
            nextCursor: string | undefined;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
    byId: QueryProcedure<{
        input: {
            id: string;
        };
        output: {
            id: string;
            title: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>post.byId: DecoratedQuery<{
    input: {
        id: string;
    };
    output: {
        id: string;
        title: string;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>byId.usePrefetchQuery: (input: {
    id: string;
} | unique symbol, opts?: TRPCFetchQueryOptions<{
    id: string;
    title: string;
}, TRPCClientErrorLike<{
    input: {
        id: string;
    };
    output: {
        id: string;
        title: string;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>> | undefined) => voidusePrefetchQuery({ id: stringid: props: {
    postId: string;
}props.postId: stringpostId });

  return (
    <const Suspense: React.ExoticComponent<React.SuspenseProps>Suspense>
      <function PostView(props: {
    postId: string;
}): React.JSX.ElementPostView postId: stringpostId={props: {
    postId: string;
}props.postId: stringpostId} />
    </const Suspense: React.ExoticComponent<React.SuspenseProps>Suspense>
  );
}

Component-level prefetching with `usePrefetchInfiniteQuery`

import React, { const Suspense: React.ExoticComponent<React.SuspenseProps>Suspense } from 'react';
import { const trpc: CreateTRPCReactBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        all: QueryProcedure<{
            input: {
                cursor?: string | undefined;
            };
            output: {
                posts: {
                    id: string;
                    title: string;
                }[];
                nextCursor: string | undefined;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<{
            input: {
                id: string;
            };
            output: {
                id: string;
                title: string;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>, unknown> & DecorateRouterRecord<...>trpc } from '../utils/trpc';
import type { PostPage } from '../server';

function function PostView(props: {
    postId: string;
}): React.JSX.ElementPostView(props: {
    postId: string;
}props: { postId: stringpostId: string }) {
  return <></>;
}

function function PostViewPage(props: {
    postId: string;
}): React.JSX.ElementPostViewPage(props: {
    postId: string;
}props: { postId: stringpostId: string }) {
  const trpc: CreateTRPCReactBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        all: QueryProcedure<{
            input: {
                cursor?: string | undefined;
            };
            output: {
                posts: {
                    id: string;
                    title: string;
                }[];
                nextCursor: string | undefined;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<{
            input: {
                id: string;
            };
            output: {
                id: string;
                title: string;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>, unknown> & DecorateRouterRecord<...>trpc.post: DecorateRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    all: QueryProcedure<{
        input: {
            cursor?: string | undefined;
        };
        output: {
            posts: {
                id: string;
                title: string;
            }[];
            nextCursor: string | undefined;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
    byId: QueryProcedure<{
        input: {
            id: string;
        };
        output: {
            id: string;
            title: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>post.all: DecoratedQuery<{
    input: {
        cursor?: string | undefined;
    };
    output: {
        posts: {
            id: string;
            title: string;
        }[];
        nextCursor?: string | undefined;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>all.usePrefetchInfiniteQuery: (input: unique symbol | Omit<{
    cursor?: string | undefined;
}, ReservedInfiniteQueryKeys>, opts: TRPCFetchInfiniteQueryOptions<{
    cursor?: string | undefined;
}, {
    posts: {
        id: string;
        title: string;
    }[];
    nextCursor?: string | undefined;
}, TRPCClientErrorLike<{
    input: {
        cursor?: string | undefined;
    };
    output: {
        posts: {
            id: string;
            title: string;
        }[];
        nextCursor?: string | undefined;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>>) => voidusePrefetchInfiniteQuery(
    {},
    {
      getNextPageParam: GetNextPageParamFunction<string | undefined, {
    posts: {
        id: string;
        title: string;
    }[];
    nextCursor?: string | undefined;
}>getNextPageParam(lastPage: PostPagelastPage: PostPage) {
        return lastPage: PostPagelastPage.PostPage.nextCursor?: string | undefinednextCursor;
      },
      initialCursor?: string | undefinedinitialCursor: '',
    },
  );

  return (
    <const Suspense: React.ExoticComponent<React.SuspenseProps>Suspense>
      <function PostView(props: {
    postId: string;
}): React.JSX.ElementPostView postId: stringpostId={props: {
    postId: string;
}props.postId: stringpostId} />
    </const Suspense: React.ExoticComponent<React.SuspenseProps>Suspense>
  );
}