Creating Service Layer in Next App Router
I have a NextJS application that was built with the t3 stack a few years ago on the pages router. I am finally getting around to migrating to the app router and am running into some confusion. TLDR: I would like to build a service layer (basically just a set of functions) to call trpc endpoints that can be reused/called from both my server and client components.
I followed the "Set up with React Server Components" on the trpc v11 docs, and it looks like there are essentially 2 "instances" of trpc that are created, 1 for client components and 1 for server components (
My existing service layer handled the trpc call as well as other conversions to FE models, so I would really like to avoid duplicating this work from client and server components if possible. Does anyone know how I can achieve this?
I followed the "Set up with React Server Components" on the trpc v11 docs, and it looks like there are essentially 2 "instances" of trpc that are created, 1 for client components and 1 for server components (
trpc/client.tsxtrpc/client.tsx and trpc/server.tsxtrpc/server.tsx, respectively). Since each of these has a unique way of interacting with the trpc endpoint, and the server.tsxserver.tsx file is "server-only""server-only" and cant be used in my client components, I'm not sure how I can go about making a service layer that is reused between client and server components.My existing service layer handled the trpc call as well as other conversions to FE models, so I would really like to avoid duplicating this work from client and server components if possible. Does anyone know how I can achieve this?
