TRPC React

Standalone TRPC React package reimplementing @trpc/react-query in a less opinionated way. May eventually be merged into the official @trpc/react-query package.

1pnpm add trpc-react

Features:

• 🛠️ Makes integrating TRPC into existing RQ applications seamless

• 🔄 Useful helper methods like getting key, fetcher functions and prefetching exposed.

• 🕸️ SSG not restricted to direct server-side calls

• 🍳 Simpler interface

• 🔌 Plugs into React Query instead of encapsulating and obscuring functionality

• 🧑‍🦯 Agnostic to meta-framework and backend setup

Motivation

While trying to integrate TRPC into my React app, I

API

The API consists of client-side only hooks and various helpers which are particularly useful for integrating with React Query in an idiomatic way.

The API aims to be a superset, and thus drop-in replacement, of the @trpc/react-query.

Create a Client

1const trpc = createTRPCReact<AppRouter>({
2  config: {
3    links: [
4      /*...*/
5    ],
6    transformer: SuperJSON,
7  },
8});

Create Query Provider

1// _app.tsx or root file
2const queryClient = useState(() => new QueryClient());
3
4return <QueryProvider>{children}</QueryProvider>;

Use hooks

Use Query

1const query = trpc.some.procedure.useQuery({
2  /* Input */
3});

Use Infinite Query

1const query = trpc.some.procedure.useInfiniteQuery({
2  /* Input */
3});

Use Lazy Query

1const [fetch, query] = trpc.some.procedure.useLazyQuery({
2  /* Options */
3});

Use Mutation

1const mut = trpc.some.procedure.useMutation({
2  /* Options */
3});

Use non-hooks

Unlike React Hooks, the below can be used anywhere in your app, especially in SSR and SSG use-cases.

1// Pre-fetch and return data, adding to queryClient cache
2trpc.some.procedure.$fetch(queryClient, {
3  /* Input */
4});
5
6// Pre-fetch data, adding to queryClient cache. No data returned or errors thrown
7trpc.some.procedure.$prefetch(queryClient, {
8  /* Input */
9});
10
11// Call raw mutation. No affect on cache
12trpc.some.procedure.$mutate(/* Input */);
13
14// Call raw query. No affect on cache
15trpc.some.procedure.$query(/* Input */);
16
17trpc.some.procedure.$prefetchInfinite(/*...*/);
18trpc.some.procedure.$fetchInfinite(/*...*/);

Hydration helpers

In the trpc docs, they describe how to achieve SSG, but only via direct server-side calls. This means if your tRPC server isn't deployed alongside your frontend static rendering runtime (e.g. getStaticProps) then SSG isn't straightforward nor documented.

Unlike the official @trpc/react-query package, trpc-react plugs into the existing idimiomatic RQ approach. However the TRPC query data requires special serialization, so the below should be drop-in replaced for existing dehydrate calls made via RQ.

1export const getStaticProps = () => {
2  const queryClient = new QueryClient();
3  // Prefetch any data
4
5  return {
6    props: {
7      dehydratedState: trpc.$dehydrate(queryClient),
8    },
9  };
10};

In _app.tsx:

1// Pre-hydrate State de-serializes the data, if necessary.
2// This is backwards compatible with vanilla RQ dehydratedState
3const prehydrateState = trpc.$prehydrate(pageProps.dehydratedState);
4
5return (
6  <QueryProvider queryClient={queryClient}>
7    <Hydrate state={prehydrateState}></Hydrate>
8  </QueryProvider>
9);

Create Server-Side Direct Client

To achieve the same direct-server-side call functionality as TRPC, we can create a special server client. Under the hood, this client calls procedures directly, and hooks are therefore disabled.

1const trpcServer = createTRPCReactServer({
2	appRouter, // <- Your router
3})
4
5trpcServer.some.procedure.$fetch(/*...*/)
6// ... etc.