T3 App Router Service Layer
I am migrating from the pages to app router manually on my app that was generated by create-t3-app. In my existing app, I had a service layer that was accessed via a data hook that maintained the state of an entity (
useRecipe() that would call the service layer implementation for loading, updating, deleting a recipe where the components would pull that state in). I’ve converted the service layer to use the new ~/trpc/server file (as opposed to the new ~/trpc/react file) so these new functions can be used by not only the data hook, but called directly from server components. This allows reusability in my service layer for conversions, etc. It seems to make sense to me to reuse these funcs rather than call trpc directly from server components to align with reusability and encapsulation “best practices” (please correct me if I’m wrong). Calling these funcs works great from my server components, but when I try to use my data hook on client components that now have the service layer that use the "use server"; instance of trpc, I am getting this error:
Is there anything I can change to make a common service layer able to be reused by a data hook (or any client component for that matter) AND directly from server components? Or is there a new approach that aligns better with server components in general? Apologies for the likely elementary question, very new to server components and learning as I go. Thanks!8 Replies
Are you able to share some code?
Generally speaking, you should be able to call the server function that imports the „server-only“ in trpc or from within a server action. (useQuery/useMutation should then work as before on a client component.)
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!
@Xanacas ^@tyler4949 you‘ve configured trpc, why are you using useQuery from react-query not trpc?
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.
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 getRecipe-new/page.tsx has „use client“ at the top and is therefore a client component which should enable you to just use trpc like you did in the old page router days, if you’re trpc is configured correctly. (I’ve currently no computer/dev env at hand, so I can’t deep dive at your codebase)
However, if you want to drop trpc that’s a different story, but in that case I can’t help. I’ve not yet used next server actions together with react query (which is possible as far as I know)
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
Set up with React Server Components | tRPC
These are the docs for our 'Classic' React Query integration, which (while still supported) is not the recommended way to start new tRPC projects with TanStack React Query. We recommend using the new TanStack React Query Integration instead.
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.
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
Appreciate your input though, thanks for sharing that!