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
erik.gh
erik.gh9mo ago
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
BillyBob
BillyBob9mo ago
Hi @erik.gh Thanks Does this mean the packages can be deployed separately ?
erik.gh
erik.gh9mo ago
sure
BillyBob
BillyBob9mo ago
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?
erik.gh
erik.gh9mo ago
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
BillyBob
BillyBob9mo ago
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.
BillyBob
BillyBob9mo ago
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?
erik.gh
erik.gh9mo ago
what do you think you're doing wrong specifically
BillyBob
BillyBob9mo ago
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
erik.gh
erik.gh9mo ago
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
BillyBob
BillyBob9mo ago
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?
erik.gh
erik.gh9mo ago
sure happy it helped that's just so you can backtrack from where the request was made if you need to
erik.gh
erik.gh9mo ago
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
BillyBob
BillyBob8mo ago
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?
erik.gh
erik.gh8mo ago
wdym with having the approuter on the client side?
BillyBob
BillyBob8mo ago
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 -
const handler = auth(async (req) =>
fetchRequestHandler({
endpoint: '/api/trpc',
router: appRouter,
req,
createContext: () =>
createTRPCContext({
session: req.auth,
headers: req.headers,
}),
}),
);
const handler = auth(async (req) =>
fetchRequestHandler({
endpoint: '/api/trpc',
router: appRouter,
req,
createContext: () =>
createTRPCContext({
session: req.auth,
headers: req.headers,
}),
}),
);
Anyway i got it working by just adding a
fetch(url, options) {
return fetch(url, {
...options,
credentials: 'include',
})
},
fetch(url, options) {
return fetch(url, {
...options,
credentials: 'include',
})
},
to the trpc React provider / client trpc connector.
erik.gh
erik.gh8mo ago
happy you got it working :)
BillyBob
BillyBob8mo ago
Would you be open to reviewing some of my code at some point? not ready yet but in the next few weeks maybe?
erik.gh
erik.gh8mo ago
sure just ping me and i will see what i can do
BillyBob
BillyBob8mo ago
Thansk Erik hey @erik.gh Would you be able to help me with this error? : https://discord.com/channels/966627436387266600/1221387449985400942
Want results from more Discord servers?
Add your server