what is tRPC ? how to use it in react project?

tRPC is a modern RPC framework that allows developers to create fully type-safe APIs with TypeScript in full-stack applications. It combines concepts from REST and GraphQL, providing a type-safe way to define and call API procedures. Here's how you can use tRPC in your React project: 1. Installation First, you need to install the necessary dependencies. You'll need @trpc/server, @trpc/client, @trpc/react-query, and @tanstack/react-query for data fetching and state management. npm install @trpc/server @trpc/client @trpc/react-query @tanstack/react-query 2. Server-Side Setup Define your tRPC router and procedures on the server. Here's an example of a simple router: // server.ts import { router, publicProcedure } from '@trpc/server'; const appRouter = router({ greet: publicProcedure .input(z.object({ name: z.string() })) .query(({ input }) => { return { greeting: `Hello, ${input.name}!`, }; }), }); export type AppRouter = typeof appRouter; 3. Client-Side Setup Create a tRPC client in your React project to communicate with the server. // utils/trpc.ts import { createTRPCReact } from '@trpc/react-query'; import type { AppRouter } from '../server'; export const trpc = createTRPCReact(); 4. Provide tRPC Client Wrap your React application with the tRPC provider to make the client available throughout your app. // App.tsx import { trpc } from './utils/trpc'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; const queryClient = new QueryClient(); function App() { return ( {/* Your app components */} ); } 5. Use tRPC in React Components You can now use tRPC hooks in your React components to call procedures defined on the server. // components/Greeting.tsx import { useQuery } from '@tanstack/react-query'; import { trpc } from '../utils/trpc'; function Greeting() { const { data, isLoading, isError } = useQuery( trpc.greet.useQuery({ name: 'World' }) ); if (isLoading) return Loading...; if (isError) return Error; return {data.greeting}; } 6. Run the Application Start your server and React application. The React component will fetch data from the tRPC endpoint and display the greeting. Advantages of Using tRPC Type Safety: tRPC ensures that the client and server share the same type definitions, reducing the risk of runtime errors. Simplified API Calls: tRPC simplifies API calls by allowing direct function calls from the client to the server. Improved Development Efficiency: The type safety and simplified API calls lead to faster development and fewer bugs. Flexible Integration: tRPC can be integrated with various frameworks and libraries, such as React Query for data fetching and state management. By following these steps, you can set up tRPC in your React project and start building a fully type-safe API. This setup will help you create a more robust and maintainable full-stack application. For more detailed information and advanced usage, you can refer to the tRPC documentation.

Apr 4, 2025 - 14:32

what is tRPC ? how to use it in react project?

tRPC is a modern RPC framework that allows developers to create fully type-safe APIs with TypeScript in full-stack applications. It combines concepts from REST and GraphQL, providing a type-safe way to define and call API procedures. Here's how you can use tRPC in your React project:

1. Installation

First, you need to install the necessary dependencies. You'll need @trpc/server, @trpc/client, @trpc/react-query, and @tanstack/react-query for data fetching and state management.

npm install @trpc/server @trpc/client @trpc/react-query @tanstack/react-query

2. Server-Side Setup

Define your tRPC router and procedures on the server. Here's an example of a simple router:

// server.ts
import { router, publicProcedure } from '@trpc/server';

const appRouter = router({
  greet: publicProcedure
    .input(z.object({ name: z.string() }))
    .query(({ input }) => {
      return {
        greeting: `Hello, ${input.name}!`,
      };
    }),
});

export type AppRouter = typeof appRouter;

3. Client-Side Setup

Create a tRPC client in your React project to communicate with the server.

// utils/trpc.ts
import { createTRPCReact } from '@trpc/react-query';
import type { AppRouter } from '../server';

export const trpc = createTRPCReact<AppRouter>();

4. Provide tRPC Client

Wrap your React application with the tRPC provider to make the client available throughout your app.

// App.tsx
import { trpc } from './utils/trpc';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <trpc.Provider queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>
        {/* Your app components */}
      </QueryClientProvider>
    </trpc.Provider>
  );
}

5. Use tRPC in React Components

You can now use tRPC hooks in your React components to call procedures defined on the server.

// components/Greeting.tsx
import { useQuery } from '@tanstack/react-query';
import { trpc } from '../utils/trpc';

function Greeting() {
  const { data, isLoading, isError } = useQuery(
    trpc.greet.useQuery({ name: 'World' })
  );

  if (isLoading) return <div>Loading...</div>;
  if (isError) return <div>Error</div>;

  return <div>{data.greeting}</div>;
}

6. Run the Application

Start your server and React application. The React component will fetch data from the tRPC endpoint and display the greeting.

Advantages of Using tRPC

Type Safety: tRPC ensures that the client and server share the same type definitions, reducing the risk of runtime errors.
Simplified API Calls: tRPC simplifies API calls by allowing direct function calls from the client to the server.
Improved Development Efficiency: The type safety and simplified API calls lead to faster development and fewer bugs.
Flexible Integration: tRPC can be integrated with various frameworks and libraries, such as React Query for data fetching and state management.

By following these steps, you can set up tRPC in your React project and start building a fully type-safe API. This setup will help you create a more robust and maintainable full-stack application. For more detailed information and advanced usage, you can refer to the tRPC documentation.