It is time to add tRPC to your project and show you how easy it is to call tRPC methods both from the client and server. Your project comes pre-configured for tRPC as part of the T3 Stack. This configuration comes with automated handling of authorisations giving you one less thing to worry about.

Routers

To add a new API route handler, we need to define a new router. Please create the following router file in src/server/api/routers/tasks.ts

import { z } from "zod";
import { createTRPCRouter, protectedProcedure } from "~/server/api/trpc";

const tasks = [
  {
    userId: "1",
    id: 1,
    description: "Complete the project report",
    completed: false
  },
  { userId: "1", id: 2, description: "Clean the house", completed: true }
];

export const tasksRouter = createTRPCRouter({
  tasks: protectedProcedure.query(async ({ ctx }) => {
    return tasks.filter((task) => task.userId === ctx.session.user.id);
  }),
  createTask: protectedProcedure
    .input(z.object({ message: z.string() }))
    .mutation(async ({ ctx, input }) => {
      // TODO
    }),
});

There are a few things to observe here:

1. <i>zod</i> - is a validation library that use simple API to define data schemas. tRPC uses zod to validate input and possibly output to its route handlers. Please see the input definition of the createTask route handler, expecting object with message property of type string.
2. protectedProcedure - will only execute if the user is authenticated. If ther user is not authenticated, the procedure will return an authentication error.
3. The session is part of the the tRPC context and in a protectedProcedure is always defined. For publicProcedure the session can be undefined.
4. if you want to use procedures for non-authenticated users, you must use publicProcedure

Registering the Router

We have only defined the router handlers for the tasks router. We still need to register as part of the tRPC router. Therefore, in the src/server/api/root.ts please add modify the router definition to include the following:

import { tasksRouter } from "./routers/tasks";

export const appRouter = createTRPCRouter({
  tasks: tasksRouter
});

👾 Exercise

Please implement the rest of the handlers for createTask, updateTask and deleteTask.

🧪 Testing tRPC