tyler4949
Creating Service Layer in Next App Router
@Nick Im sorry for the ping but any chance you could take a look at this and let me know if Im missing something obvious?
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.
11 replies
Can i use a single trpc proxy client in NextJS 12?
If youre using pages router still (I think you are in v12), as long as you have a single
<QueryClientProvider /> wrapping your app, you are fine to use a single trpc instance. Heres an example I have:
https://github.com/tylerpashigian/t3-recipe-book/blob/main/src/utils/api.ts#L21
I am using createTRPCNext() instead of createTRPCProxyClient(), but looks similar enough.3 replies
Creating Service Layer in Next App Router
First of all, not over explaining at all haha. I genuinely appreciate the thoughtful response. The
create-t3-trubo examples are actually kind of why I originally asked this question though. I am using the create-t3-app CLI. Yes, they both use/call the trpc router endpoints, but the trpc "instance" (not sure if thats even the correct word to use here) is imported from separate files (react.tsx and server.ts) depending on which context theyre using.
In a vacuum, this doesnt really matter because the route is set up the same regardless of the instance it uses, but I like to try to isolate potential changes to where they have as minimal as an impact as possible. For example, if I ever move away from trpc, I'd have to go into every component/hook/provider I set up to change these from trpc calls to lets say fetch() calls. I also have some conversion from backend models to frontend models in my current service layer (again in case theres ever a change in backend, my frontend is largely untouched other than service layer/conversion methods).
Your suggestion about wrapping these calls in a separated useCreatePost() func is kinda what I was looking for, but that is still specific to a single trpc instance. I suppose a way around this would just be to set up 2 service files (ex. recipe.client-service.ts and recipe.server-service.ts) and then have the correct trpc instance imported for their context. Still feels duplicative but not quite as bad. I do like moving the mutation logic on the router side to createPost but that almost feels like a readability improvement more than anything since the router is shared between approaches.
All that to say, I could be completely wrong on all this and this may be me completely overthinking it. I'm brand new to learning server components and just trying to understand why I can't share similar functionality between client and server components, when I think I could if I used something simple like the fetch() api.11 replies
Creating Service Layer in Next App Router
Thanks for the response! Do you happen to have a code example of this I can view? I think I can picture what you're suggesting, but it's not necessarily how I was hoping to use it. Definitely curious, though. It feels strange to me calling trpc directly from components, rather than a function I can control (by "I" I mean the frontend, I'd like to separate the components from the backend trpc implementation)
11 replies