tyler4949 Comments - Answer Overflow

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

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

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

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

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

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

•Created by tyler4949 on 3/7/2025 in #questions

T3 App Router Service Layer

Appreciate your input though, thanks for sharing that!

14 replies

•Created by tyler4949 on 3/7/2025 in #questions

T3 App Router Service Layer

Idk, I seem to be the only person concerned with this so perhaps I am overthinking it haha. It just seems like its pretty duplicative to support a separate isntance of trpc for both client and server components

14 replies

•Created by tyler4949 on 3/7/2025 in #questions

T3 App Router Service Layer

Yeah, I followed that. It seems as though they recommend creating 2 separate instances as well (assume thats what the create-react-app CLI was inspired by), but they also call the trpc endpoints directly from the server components which I wanted to avoid.

14 replies

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

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

•Created by tyler4949 on 3/7/2025 in #questions

T3 App Router Service Layer

I don't want to drop trpc, I just meant the approach I was hoping to use would result in the client instance useless. Unfortunately, it doesnt look like I can do that. I understand I can use my old approach in my client components, but that wont work with server components. I was just really hoping to find a way to create a function that calls trpc endpoints that can be called by both client and server components.e

14 replies

•Created by tyler4949 on 3/7/2025 in #questions

T3 App Router Service Layer

Full transparency, this issue is likely due to my lack of understanding of server components, and how they work with react-query. But thats why I am doing this exersice, so if there is a better approach, would appreciate any insight I can get

14 replies

•Created by tyler4949 on 3/7/2025 in #questions

T3 App Router Service Layer

In the useRecipe() data hook? I suppose I may be misunderstanding how react-query works with server components, but I assumed since these are built on the server and the trpc instance in the trpc/server.ts file doesn't have a <QueryClientProvider />, there would be no caching by default (like it would in my old implementation: const { isPending: isUpdating, mutateAsync: update } = api.recipes.update.useMutation({}); I wanted to wrap the request in react-query in my data hook so caching was enabled for my client components, since the service layer is using the "server-only" instance. This approach does result in the trpc/react.tsx instance being relatively useless though.

14 replies

•Created by tyler4949 on 3/7/2025 in #questions

T3 App Router Service Layer

@Xanacas ^

14 replies

•Created by tyler4949 on 3/7/2025 in #questions

T3 App Router Service Layer

Sure thing. The issue seems to be calling the service layer that uses the "server-only" trpc instance from a data hook (or any client component for that matter). When calling the func from a server component, it works fine. Ideally, I'd like to be able to reuse the same func from both client and server components. I just pushed up this commit: https://github.com/tylerpashigian/t3-recipe-book/commit/117b81cd14a89b549428b03bf019d284d21776bd. Feel free to take a look at the whole branch, but this commit kinda isolates the relevant changes. The root page.tsx call works fine, the recipe-new/page.tsx is throwing the error. Let me know if you have any follow up questions, I appreciate taking a look!

14 replies

•Created by tyler4949 on 2/16/2025 in #help-and-questions

Backing up data with Prisma Postgres

Update: I ended up solving this using a similar approach to the guide of restoring prisma postgres with another postgres db: https://www.prisma.io/docs/getting-started/prisma-postgres/import-from-existing-database-postgresql. I just used pg_dump once the TCP tunnel was started

4 replies

•Created by tyler4949 on 2/9/2025 in #help-and-questions

ConnectorError after moving to Prisma Postgres

@Nurul (Prisma) looks like that did the trick, thank you so much!

10 replies

•Created by tyler4949 on 2/9/2025 in #help-and-questions

ConnectorError after moving to Prisma Postgres

Ah I didnt see this as part of the setup docs, thank you. I will try that

10 replies