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?
N
Nick452d ago
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
N
Nick452d ago
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-...
C
Captain452d ago
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
N
Nick452d ago
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
C
Captain452d ago
Ah oke. Didnt know that Im still some what away from understanding how it all comes together so thnx for the explanation
N
Nick452d ago
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)
C
Captain452d ago
Wouldn't next make routing and things like that much easier?
More 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 wiNot 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 witthe 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 Is it possible to create a generic router to pass a type on?Hi, I was wondering if it is possible to create a generic router to pass a type which is expected toHardware IoT APIMaybe it's a wrong place to ask but out of curious: Does anyone have experience building API for harHelp 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 anBest 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 roA 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 ihow can i get procedure name?is it possible to get procedure name? i would like to append a service to ctx based on procedure namRight way to catch all unexpected errors before they reach the userHi, I was wondering, what's the right way to catch all unexpected errors (like db errors) and replactRPC sockets with reactTrying to make my React app work with socket with minimal server but getting error: "Uncaught TypeEShould useQueries be able to 'select' data?Hi! I'm trying to use the newly implemented `useQueries` method to query for multiple items. I need Right way to structure your code when using tRPC?I was wondering how you properly structure your tRPC ruter code? Writing all the code in the routersReact Native UsageHello, I wanted to know if trpc can be used with react native ? And is it possible on a bare react n