Guidance / Guide / Repo with monorepo separate server & client NextJS with App Dir, tRPC
Looking for the best way to achieve the above. Any help appreciated. Can look at an existing GitHub Repo or Blog post
20 Replies
something like this?
https://github.com/t3-oss/create-t3-turbo
GitHub
GitHub - t3-oss/create-t3-turbo: Clean and simple starter repo usin...
Clean and simple starter repo using the T3 Stack along with Expo React Native - t3-oss/create-t3-turbo
Hi @erik.gh Thanks
Does this mean the packages can be deployed separately ?
sure
hm. i don't fully understand how it works.
They use both createTrpcReact and createCaller for server side calls. but the createCaller looks like it would be on the same server?
where does
apps/nextjs/src/trpc/server.ts
get the url from for the remote server?in that monorepo the server is still the nextjs inbuilt server. the code is just abstracted away and seperated from the application using the api package.
i would just use this as a starting point and create a new package server where i spin up an express server or whatever to run the trpc api
and of course remove nextjs api route etc. where it's currently running the api from
Would you mind checking this? This is what i have so far
https://github.com/lwears/ReelScore
GitHub
GitHub - lwears/ReelScore: Movies and TV Ratings
Movies and TV Ratings. Contribute to lwears/ReelScore development by creating an account on GitHub.
but i was starting to feel i was doing it wrong.
I guess if i want onSuccess for displaying toasts and stuff id need to use createTrpcReact, react-query and use client components for that?
what do you think you're doing wrong specifically
well to be honest its only just clicked that i need 2 connectors for the API - 1 for server components and 1 for client components.
for 3 months ive been confused as to why ive seen this in other repo's
I've just seen both createTrpcProxyClient and createTrpcReact. and with createTrpcReact you get the react-query integration.
I have been getting confused as to how i could get a Toast and onSuccess when using Server Actions in Server Components. But now i see elsewhere that when they want to do this its done with the client API connector
and of course how would onSuccess / Toast work in a Server Component? i don't fully understand why it doesn't but it kind of makes sense in my head in some way
yeah i think the difficult part is to differentiate between pre servercomponents and post servercomponents era when looking at examples online
client components are for everything that's interactive
Thanks for your help. You've made something click for me
just by this
which I have already seen before
Could you help me understand why they have
heads.set("x-trpc-source", "rsc");
and headers.set("x-trpc-source", "nextjs-react");
in the headers?sure happy it helped
that's just so you can backtrack from where the request was made if you need to
it's put into trpc context right here:
https://github.com/t3-oss/create-t3-turbo/blob/main/packages/api/src/trpc.ts#L29
GitHub
create-t3-turbo/packages/api/src/trpc.ts at main · t3-oss/create-t3...
Clean and simple starter repo using the T3 Stack along with Expo React Native - t3-oss/create-t3-turbo
hey @erik.gh If you are still around.I am a little confused about setting up the
fetchRequestHandler
when using a monorepo. Must I have the appRouter (non-type) on the client side?wdym with having the approuter on the client side?
Hi Erik. sorry for the delay i didn't expect a response so quickly.
So you helped me last week understand why i need a client side trpc connector.
I set that up but was getting an unauthorised error because it was not sending the cookies.
I thought i needed to add one of these fetchRequestHandlers that are in create-t3-app and create-t3-turbo. they add the context and headers, but they also have a reference to the appRouter in there (not the type).
this -
Anyway i got it working by just adding a
to the trpc React provider / client trpc connector.
happy you got it working :)
Would you be open to reviewing some of my code at some point? not ready yet but in the next few weeks maybe?
sure just ping me and i will see what i can do
Thansk Erik
hey @erik.gh Would you be able to help me with this error? : https://discord.com/channels/966627436387266600/1221387449985400942