Theo's Typesafe Cult•10mo ago

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•10mo ago

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

BillyBobOP•10mo ago

Hi @erik.gh Thanks Does this mean the packages can be deployed separately ?

erik.gh•10mo ago

sure

BillyBobOP•10mo 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•10mo 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

BillyBobOP•10mo 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.

BillyBobOP•10mo 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•10mo ago

what do you think you're doing wrong specifically

BillyBobOP•10mo 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•10mo 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

BillyBobOP•10mo 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•10mo ago

sure happy it helped that's just so you can backtrack from where the request was made if you need to

erik.gh•10mo ago

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

BillyBobOP•10mo 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•10mo ago

wdym with having the approuter on the client side?

BillyBobOP•10mo 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•10mo ago

happy you got it working :)

BillyBobOP•10mo 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•10mo ago

sure just ping me and i will see what i can do

BillyBobOP•10mo ago

Thansk Erik hey @erik.gh Would you be able to help me with this error? : https://discord.com/channels/966627436387266600/1221387449985400942

Gaming

Programming

Guidance / Guide / Repo with monorepo separate server & client NextJS with App Dir, tRPC