reed Comments

reed

•Created by tyler4949 on 3/9/2025 in #❓-help

Creating Service Layer in Next App Router

Also, at the risk of overexplaining stuff lol, I'll say that I've also found it useful to create a layer on the server that controls my database IO, integrations with external APIs, etc. And my tRPC router procedures call these functions. That way I keep my tRPC code focused on communication over the network, and a consistent, composable router API. The create-t3-turbo is simple because it's an example, but in a "real" codebase this code

  create: protectedProcedure
    .input(CreatePostSchema)
    .mutation(({ ctx, input }) => {
      return ctx.db.insert(Post).values(input);
    }),

  create: protectedProcedure
    .input(CreatePostSchema)
    .mutation(({ ctx, input }) => {
      return ctx.db.insert(Post).values(input);
    }),

Would look something like this instead

  create: protectedProcedure
    .input(CreatePostSchema)
    .mutation(createPost),

  create: protectedProcedure
    .input(CreatePostSchema)
    .mutation(createPost),

And this hypothetical createPost function would come from a layer that creates my server-side functionality. That keeps tRPC feeling like a thin communication+API layer to me.

11 replies

TtRPC

•Created by tyler4949 on 3/9/2025 in #❓-help

Creating Service Layer in Next App Router

In my opinion, the main point of RPC is to call the procedures from environment A and have them execute in environment B, e.g. calling tRPC on the client and having it execute on the server. The server-side tRPC client is more of a nice-to-have so that you can use the same code, logic, router procedures on the server that you already built for the client.

11 replies

TtRPC

•Created by tyler4949 on 3/9/2025 in #❓-help

Creating Service Layer in Next App Router

I don't have any public repos I can share, sorry. But I'm happy to chat through some examples here. This create-t3-turbo repo has a tRPC setup example. Because the example repo is using Turborepo the pieces are spread across the repo a bit more. Here they have a blog post router: https://github.com/t3-oss/create-t3-turbo/blob/main/packages/api/src/router/post.ts The difference procedures here are performing database IO. Here they're using tRPC on the server to fetch all of the posts for the homepage before sending the initial HTML to the client: https://github.com/t3-oss/create-t3-turbo/blob/main/apps/nextjs/src/app/page.tsx Here they're using the post.create procedure in the client when the user creates a new post: https://github.com/t3-oss/create-t3-turbo/blob/main/apps/nextjs/src/app/_components/posts.tsx#L37 That's actually using new syntax. I know the tRPC team has been proposing new ways to wire into React Query, so I'll need to look into this example a bit more. The way that I've historically done it is via a tRPC instance that wires directly into a React Query provider, and then I would have used it like

const createPost = trpc.post.create.useMutation()

const createPost = trpc.post.create.useMutation()

I will say that on big projects I've found it convenient to create some kind of react-query layer in my front-end code that calls the tRPC integration pieces, but has control over the react-query integration so that I can be consistent about which mutations invalidate which pieces of the react-query cache, and things like that.

function useCreatePost(args) {
  return api.post.create.useMutation(args);
}

function useCreatePost(args) {
  return api.post.create.useMutation(args);
}

That strategy would give you that extra layer of functions between tRPC and your client component.

11 replies

TtRPC

•Created by tyler4949 on 3/9/2025 in #❓-help

Creating Service Layer in Next App Router

The way I've done it is to have some set of server-side functions that the client and/or server want to use, typically for data IO. I wire those server-side IO functions into tRPC router procedures. Then when I want to use a tRPC router procedure: * Client-side use the tRPC router that wires into React Query, and passes data via the HTTP route handler function (e.g. app/api/trpc). * Server-side use server tRPC instance and call it directly, like to get initial data to use in a server component (often in an app router page.ts). So maybe what solves your problem is taking advantage of calling the same tRPC router and procedures on both client and server.

11 replies