NextJS + TRPC + NX

CCaptain

1/21/2023

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?

Nnlucas

1/21/2023

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

CCaptain

1/21/2023

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

Nnlucas

1/21/2023

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

CCaptain

1/21/2023

Ah oke. Didnt know that Im still some what away from understanding how it all comes together so thnx for the explanation

Nnlucas

1/21/2023

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)

CCaptain

1/21/2023

Wouldn't next make routing and things like that much easier?

Looking for more? Join the community!

NextJS + TRPC + NX

NextJS + TRPC + NX

Recommended Posts

Global context or shared context.We are using react query and trpc and we ran into a undesired effect I hope someone could help me wi Not sure how to troubleshoot `Failed to fetch at Function.from`Am getting this on a trpc mutation in v.9 that is firing successfully then pushing me to the URL wit the tRPC loop or cyclewhat is the full sequesnce of execution of trpc? where does it start when a user requests something tRPC context and NextJSGuys quick question about using trpc and nextjs. I'm using context with trpc to create some queries Hardware IoT APIMaybe it's a wrong place to ask but out of curious: Does anyone have experience building API for har Help to understand how and when to use tRPC in larger projectsHi! I'm pretty sure the answer to my question is that tRPC is not suitable for this project, but an Best practices on trpc and SentryWe are currently migrating to trpc from Apollo server/graphql. We don't use next. What are the best How to do dependecy injection?My routes are grouped by using the router object. i'd like to be able to inject a service to each ro A lot of WHYGreat post from @cje on Twitter but also got a lot of questions 1. If the data flow starts from `How are they defined separately?I am using monorepo for my project design and I want to separate the definition of trpc completely i how can i get procedure name?is it possible to get procedure name? i would like to append a service to ctx based on procedure nam tRPC sockets with reactTrying to make my React app work with socket with minimal server but getting error: "Uncaught TypeE