How do *you* structure the tRPC router when dealing with isolated components?
Hi 👋
I'm wondering how other people handle their tRPC router for cases where a component deep in the Next.js file tree (e.g.
/[locale]/(dashboard)/categories/posts/comments/list-component/my-procedure.ts ) has a procedure.
Everything inside the folder /[locale]/(dashboard)/categories/posts/comments/list-component is a single react component (tree). I.e. I don't share this component anywhere else. But it still has a query procedure to fetch the data we need for it.
Now, since the component's usage is very local, it makes little sense to put it into some global list like the tRPC router, but we have to for tRPC to work. How do you structure the tRPC router to make sure such local components are well maintainable?2 Replies
In my apps I like to follow this structure: I have two top-level routers - an
adminRouter and a publicRouter.
The adminRouter has many nested routers, e.g. userRouter or productRouter, where each nested router contains CRUD procedures for database entities.
Like you, I also have some one-off procedures I need to call in an admin dashboard. For example for clearing caches or for streaming OpenAI response data into an input field.
For that I decided to create a systemRouter nested under adminRouter, with routes like /trpc/admin.system.clearCaches or /trpc/admin.system.openaiTranslation.
If I'm guessing correctly and you're building a component to display comments of a post, maybe you already have like a commentsRouter or postsRouter where you can put that procedure. Otherwise think of a way to group this (and potential future one-off procedures) into a router.Example
