Learn tRPC in 5 minutes

Summary

In this video tutorial, the presenter introduces `trpc`, a framework for building full-stack applications with TypeScript. By using `trpc`, developers can create type-safe communication between the frontend and backend, streamlining the development process. The tutorial covers setting up a minimal example with routers, procedures, and input validation using Zod. It also highlights `trpc`'s ability to handle authentication via middleware and its integration with frameworks like Next.js. The presenter emphasizes the enhanced developer experience and quick navigation between frontend and backend, making `trpc` ideal for modern TypeScript-based full-stack projects.

Takeaways

• 😀 TRPC enables type-safe full-stack development, linking front-end and back-end using TypeScript.
• 😀 It improves development speed by providing instant feedback and type safety across both client and server.
• 😀 You can quickly jump between front-end and back-end code using TypeScript's type inference and TRPC's auto-completion features.
• 😀 TRPC follows a simple mono repo structure, separating the client (front-end) and server (back-end) components.
• 😀 Procedures in TRPC (like 'greet' or 'sayGoodbye') are defined on the server and called from the client, ensuring consistent data handling.
• 😀 Zod is used for input validation in TRPC, ensuring that the data passed between client and server is correctly typed.
• 😀 TRPC distinguishes between queries (fetching data) and mutations (modifying data), both providing type safety and autocompletion.
• 😀 Public and protected procedures allow for flexible access control and authentication via middleware.
• 😀 Middleware in TRPC lets you manage additional processes like authentication, and the context system makes it easy to pass session data.
• 😀 TRPC is well-integrated with Next.js, but it can also be used with other frameworks like SvelteKit and Vue, or even stand-alone.
• 😀 The primary benefit of using TRPC is its seamless integration with TypeScript, making full-stack development quicker, safer, and more efficient.

Q & A

What is trpc, and how does it help in full-stack development?

trpc is a TypeScript-based framework that enables type-safe communication between the frontend and backend. It allows developers to build full-stack applications where both the client and server share a type-safe link, reducing errors and improving development speed.

What is the advantage of using TypeScript with trpc?

Using TypeScript with trpc provides full type safety, ensuring that any changes on the backend are immediately reflected on the frontend. This reduces the chances of errors due to mismatched data types and speeds up development through features like autocomplete and type checking.

How is trpc set up in the provided example?

In the example, trpc is set up in a monorepo structure with two main directories: one for the client (frontend) and one for the server (backend). The backend defines an `appRouter`, which is then used by the frontend to make type-safe API calls.

What is the role of the `appRouter` in trpc?

The `appRouter` is a type derived from the backend that is used by the frontend to make queries. It defines the methods (or procedures) available for the client to interact with the backend, ensuring type safety across both sides.

What happens when a method is removed or modified on the backend?

When a method is removed or modified on the backend, the frontend immediately detects the change and throws an error if the client tries to use the outdated method. This ensures that only valid, available methods are called, preserving type safety.

What is the significance of the `publicProcedure` in trpc?

The `publicProcedure` is the default procedure in trpc that does not have any input validation. It is open to anyone to call. Procedures can be extended with input validation to ensure correct data types are passed from the client to the backend.

How does Zod improve input validation in trpc?

Zod is a validation library that can be integrated with trpc to validate the input passed to the backend. It ensures that the input data matches the expected type, like a string or an object, reducing the chances of invalid data causing errors.

What is the difference between a query and a mutation in trpc?

A query in trpc is used for retrieving data from the backend, while a mutation is used for changing or updating data. Mutations require specifying a different method (mutation) on the client side, while queries are used to fetch data.

What is the purpose of middleware in trpc?

Middleware in trpc allows for additional processing, such as authentication or logging, before a procedure is executed. For example, an `isAuth` middleware can be used to check if a user is authenticated before allowing access to protected procedures.

Can trpc be used with other frameworks besides Next.js?

Yes, trpc can be used with various frameworks like SvelteKit, Vue, or even as a standalone solution. The tutorial specifically recommends Next.js, but trpc is flexible and can be integrated with other technologies depending on the project needs.