NextJS + TRPC + NX
i have a nextjs application inside a NX monorepo. i have everything for @trpc/server inside a node library. i have moved the utils file inside the SRC folder in the next js project. this way, i have node lib which does all for routing an backend logic. i have another lib for ui. this lib exports dumb ui components.
suppose i wanted to move the trpc utils file to one of my libraries so as to be able to fetch data inside the "dumb components", could i do this and is this correct? right now, im forced to prop drill because applications cant share code in NX. only libs can.
anyone have a pattern for either creating smart components inside NX libs or a pattern for providing context?
7 Replies
A lot of this comes down to “if it works it’s okay”, but what I will say is an Nx application can definitely import from another app, it’s just there’s an Nx eslint rule by default which you need to create a whitelist for
Tweak the rule and you can import the api types straight from the app
For the dumb components thing, I’m currently working on a contribution which should make that pattern easier in tRPC, though I think it has a bit of work to go yet https://github.com/trpc/trpc/pull/3646
GitHub
feat(react-query): (prototyping) Polymorphic tRPC routes in react c...
This adds some helper types, MutationLike<TProcedure> and QueryLike<TProcedure> and proposes a factory pattern for generating routes which share common functionality across several sub-...
That looks very interesting. Thnx for response
I was advised to create a next lib and export the trpc component from there
I thoughg i read on the nx docs that apps cant share code. Only libs can
Very curious about this one
Well you should understand that you’re only importing types from tRPC, not “code”. So typescript will compile the API for checking but Babel will actually build the app and ignore the type imports from the api. So while an app might have a problem loading code from another app in Nx, that’s not actually what’s happening
If you like the lib approach it should be fine though
Ah oke. Didnt know that
Im still some what away from understanding how it all comes together so thnx for the explanation
No problem. My Nx app is quite successfully working with all my logic in the API and imported to a React client, but I’m still figuring out some of this too!
(I also don’t use Next, which has a whole other thing going on)
Wouldn't next make routing and things like that much easier?