@ssrx/trpc-react-query

Similar https://github.com/trpc/trpc/tree/main/packages/react-query, with the following major changes:

• Does not rely on global/react context - supports instanced use (for example in SSR where a fresh client per request is required).
• Scoped + typesafe .$invalidate() function on queries, e.g. trpc.articles.$invalidate({ id }).

Example instantiation from a react-query client:

1import type { QueryClient } from '@tanstack/react-query';
2import { createTRPCUntypedClient } from '@trpc/client';
3import { type CreateTRPCQueryOptions, createTRPCReact } from '@ssrx/trpc-react-query';
4
5export const createTrpc = ({
6  queryClient,
7  createTRPCQueryOptions,
8}: {
9  queryClient: QueryClient;
10  options?: CreateTRPCQueryOptions;
11}) => {
12  const trpcClient = createTRPCUntypedClient();
13
14  const trpc = createTRPCReact<TRouter>({
15    client: trpcClient,
16    queryClient,
17    ...createTRPCQueryOptions,
18  });
19
20  return trpc;
21};