React Query Integration

tRPC offers a first class integration with React. Under the hood this is simply a wrapper around the very popular @tanstack/react-query, so we recommend that you familiarise yourself with React Query, as their docs go in to much greater depth on its usage.

tip

If you are using Next.js we recommend using our integration with that instead

The tRPC React Query Integration

This library enables usage directly within React components

pages/IndexPage.tsx
tsx
import { trpc } from '../utils/trpc';
export default function IndexPage() {
  const helloQuery = trpc.hello.useQuery({ name: 'Bob' });
  const goodbyeMutation = trpc.goodbye.useMutation();
  return (
    <div>
      <p>{helloQuery.data?.greeting}</p>
      <button onClick={() => goodbyeMutation.mutate()}>Say Goodbye</button>
    </div>
  );
}

pages/IndexPage.tsx
tsx
import { trpc } from '../utils/trpc';
export default function IndexPage() {
  const helloQuery = trpc.hello.useQuery({ name: 'Bob' });
  const goodbyeMutation = trpc.goodbye.useMutation();
  return (
    <div>
      <p>{helloQuery.data?.greeting}</p>
      <button onClick={() => goodbyeMutation.mutate()}>Say Goodbye</button>
    </div>
  );
}

Differences to vanilla React Query

The wrapper abstracts some aspects of React Query for you:

• Query Keys - these are generated and managed by tRPC on your behalf, based on the procedure inputs you provide
  • If you need the query key which tRPC calculates, you can use getQueryKey
• Type safe by default - the types you provide in your tRPC Backend also drive the types of your React Query client, providing safety throughout your React app