7 ms·
Full-Stack TypeScript with tRPC and React
- mariuz 4y agoarchive.org link in case site is down https://web.archive.org/web/20230307144631/https://www.robinwieruch.de/react-trpc/ https://web.archive.org/web/20230307144631/https://www.robin...
- bigfoot675 4y agoVery cool. And if you're interested in this sort of thing, I would recommend taking a look at remix.run as well. They go a bit farther and pull these concepts into a framework where it's straightforward to describe the client/server relationship in this style
- ushakov 4y agoIf you want tRPC-like developer experience but prefer GraphQL, I can recommend Garph You get all the benefits of tRPC and all the benefits of GraphQL in one package. Garph can also be used to replace graphql-codegen in your stack with statically inferred types https://github.com/stepci/garph https://github.com/stepci/garph (disclaimer: I'm author of Garph)
- thdxr 4y agotook a quick look - does this differ meaningfully from pothos?
- ushakov 4y agoGreat question, happy to answer! There are a couple of differences: Garph is easier to use than Pothos, Garph fully supports circular references (no workarounds!) and Garph solves type-safety for clients without the need for code-gen. We also offer a compatible client for React/Next.js based on GQty (formerly GQless) for the best experience Pothos is great for backend-only applications and if you need advanced features such as Relay right now. Garph is great if you want the best possible developer experience and type-safety on both ends of your stack
- noughtme 4y agoHmmm... interesting. Was this intended for public APIs? I think the whole point of tRPC is to reduce the overhead down to zero, since this is only for internal APIs.
- ushakov 4y agoYes! tRPC is a great choice if you want to call server functions from the client without overhead in a type-safe way. However, with React Server Components, I doubt you will need tRPC for this use-case anymore Our concept was: take the amazing developer experience and end-to-end type-safety of tRPC but give you an actual, spec-compatible GraphQL API, that you can expose and others can use and that also works with existing GraphQL tools This is how Garph was born!
- arnorhs 4y agoThis sounds pretty slick. I need to give this a try
- satvikpendem 4y agoI use GraphQL for disparate clients talking to the server, it's agnostic to the backend and frontend languages. If Garph is already in TS, why would I use it instead of tRPC? I guess if I have a non-TS frontend such as a Flutter app?
- Wissmueller 4y agoPerfect use-case for Garph: You have a TypeScript backend and TypeScript frontend and want to expose the GraphQL API to third-party consumers or add a mobile app into the mix And since Garph produces a spec-compatible GraphQL API you can use it with existing tools like Hasura, Apollo, Stellate, AWS AppSync, etc.
- satvikpendem 4y agoMakes sense, so if I already have a tRPC application, what's the transition like to Garph? Or do I need to have it already in Garph when first starting out (ie hard to transition)?
- ushakov 4y agoDepends on your application size. The hardest part to transition will probably be the client We will provide a migration path in our documentation and build some utilities to automate the work required. You can join our Discord to get an update when we have something to share (linked in the repo)
- kamilafsar 4y agoShameless plug: I’m one of the authors of Phero [1]. It’s goal is similar to tRPC: fullstack typesafety between your server and client(s). One difference is syntax: Phero leverages the TS compiler api to generate parsers for your backend functions. It will parse input and output of your api functions, automatically, based on the types you define for your functions. It will generate a declaration file of your api and generate an RPC style client SDK for your frontend. Another difference is that it aims to be more batteries includes. [1] https://github.com/phero-hq/phero https://github.com/phero-hq/phero Comparison: https://phero.dev/docs/comparisons/tRPC https://phero.dev/docs/comparisons/tRPC
- ushakov 4y agoAs far as I understand Phero needs a build-step, where as tRPC does not This means you won't be getting the same real-time experience/feedback you get with tRPC, because you will still be waiting for Phero's compiler to complete the build I was expecting something like that to emerge and initially wanted to go into that direction with Garph (see my comment below) but we ultimately decided that a code-gen does not give you the same amazing feeling so we ended building a pure TypeScript library Good luck with Phero in any case!
- kamilafsar 4y agoYes, Phero has a build step. Phero does come with a CLI and will watch code changes, build your TS alongside with an client SDK. In our experience the latency between changing something in your API, and seeing compile errors arise in the client is just a few seconds. And this only matters when your API contract changes, which is of course not always. Not a biggy in our eyes. In order to run, you'd need to compile TS anyways. :) In our opinion this is well worth the "magic" Phero adds: it will work with plain TS. No "t.string" like apis to build your apis/models. Matter of taste I guess :)
- arnorhs 4y agoNot to take away from your explanation, but this is actually the key point that a lot of developers have been fighting in the last couple of years. We've "had" end-to-end typesafety with codegen tools openapi/swagger and graphql etc. However, the big issue with a lot of those tools is that you end up having to manage this compile step. The real magic of trpc is exactly this point about it being without a compiler, where the types are derived from the very same typescript files - this is what gives it this immediacy and feeling of it being instant and not having to deal with a compile step. I've always wondered whether we'd get the same benefits and niceties with a really streamlined compiling approach - perhaps something like phero. But it's just a little harder of a sell compared to the built-in typesafety you get from trpc
- ctvo 4y agoCan I ask a naive question? What does this get me that gRPC + Protobuf to generate a Typescript client wouldn't? Edit: Ah. I see, you can use Typescript to define the IDL vs. learning Protobuf, Smithy, ... Not sure I would take the trade-off. I like having the option of using something other than Typescript for my back-end. The dev experience isn't compelling enough for me. Contract changes are not an area I iterate on so often that a small delay in re-generating the client from an IDL causes me to grab for this dependency.
- azangru 4y ago> What does this get me that gRPC + Protobuf to generate a Typescript client wouldn't? Have you tried running gRPC in the browser? How was the experience?
- ctvo 4y agoI have. It wasn't great, but it worked, and that was years ago. Is that the reason, though? tRPC generates a nicer client when targeting the browser?
- azangru 4y agoYes, this is my understanding. If the browser client and the server are both written in typescript, tRPC has a very attractive story of bridging the two. No protobufs though; so whatever performance wins gRPC brings, are absent from the tRPC story.
- thinkingkong 4y agoThe big item is having no build step. With gRPC even no matter how fast your codegen is, it still needs to execute. With tRPC the return types from the routers are all automatically derived from whatever the mutations or queries return.
- k__ 4y agoHow does a TypeScript based codebase not have a build step?
- matthewfcarlson 4y agoI used tRPC with Cloudflare workers and a Vue/Pinia front-end and really loved the experience. tRPC was a bit of a fussy one to setup but once it was setup, it was a real pleasure to work with. Being able to test the calls with unit tests was also fantastic
- karlosos 4y agoCould you elaborate more on how you approached testing the applications that use tRPC? I was looking for example big projects that use tRPC but they don't have tests [0]. I am wondering what you mean by testing calls with unit tests. Have you been testing individual endpoints, e.g. `trpc.postst.getAll`, or have you been testing components that use tRPC endpoints? I would appreciate some examples. [0] https://trpc.io/docs/awesome-trpc#-open-source-projects-using-trpc https://trpc.io/docs/awesome-trpc#-open-source-projects-usin...
- alexdotjs 4y agoHere's an example of testing: https://github.com/trpc/examples-next-prisma-starter/blob/main/src/server/routers/post.test.ts https://github.com/trpc/examples-next-prisma-starter/blob/ma...
- vyrotek 4y agoI excited about the direction all these frameworks are going. It's the BFF pattern on steroids. No more dealing with APIs and typed contracts. NextJS and RemixJS have interesting approaches to gluing clients and server together. Microsoft Blazor Server is an extreme version of where things are headed. Just call C# functions and the UI is surgically updated as needed over SignalR. I haven't found any other stacks take it that far yet.
- Wissmueller 4y agoMe too! Here are more tRPC-like projects: - ts-rest (https://ts-rest.com https://ts-rest.com) - Garph (https://github.com/stepci/garph https://github.com/stepci/garph) - zodios (https://www.zodios.org https://www.zodios.org) - Kysely (https://github.com/koskimas/kysely https://github.com/koskimas/kysely)
- Scarbutt 4y agoBut with BFF you still need APIs? backend servers to serve the frontend servers.
- satvikpendem 4y agoIf you'd like something like this for Rust, there is rspc [0], where you can write your Rust backend code and React bindings are generated automatically. [0] https://www.rspc.dev/ https://www.rspc.dev/
- denysonique 4y agoFor APIlessness I highly recommend Telefunc[1] over tRPC. Telefun is seamless. 1: https://telefunc.com/ https://telefunc.com/
- throwaway4good 4y agoThat looks like a very cool idea. Basically one code base, all browser client code, except for the (apparently directly linked) telefunc files that are caught by some build step and turned into something that runs on the server. Have you used it on a larger project?
- denysonique 4y agoYes, without any problems. It scales really well.
- nathias 4y agoa string by any other name
- bastardoperator 4y agoI'd recommend https://create.t3.gg/ https://create.t3.gg/, it bundles trpc, prisma, nextjs, etc...
- dstroot 4y agoThanks for sharing this. I haven't tried tRPC yet, but I do use Prisma. I am slightly curious/puzzled why I would need both in the same project. Doesn't Prisma get you most of the way there? Or, is this for creating a CRUD REST API that talks to the DB via Prisma, and to the Client via REST/tRPC? Seems heavy to me.
- aobdev 4y agoThey serve different purposes. Prisma provides type safety between server and database, tRPC provides type safety between client and server. You’re most likely going to have some logic between those two channels that manipulates and makes those interfaces similar but not quite the same.
- numinoid 4y agotRPC on the back end essentially is sharing the typed return value of an API route call with it's react query wrapper on the client. It's useful with Prisma because you can leverage type inference coming from the Prisma query, meaning your types will always be up to date with your DB. EG a tRPC query that returns prisma.posts.findMany() will share the typeof Post with your client when you call the tRPC route as the return type of the API call, without you having to do any type definitions etc.
- vosper 4y agoNote that tRPC also has an official NextJS starter kit that also bundles Prisma and Playwright, but not Tailwind or an auth plugin. I've used it, it worked well. https://trpc.io/docs/nextjs https://trpc.io/docs/nextjs
- Already__Taken 4y agoSeems to promise less boilerplate than postgraphile but it doesn't look it.
- Already__Taken 4y agoToo late to edit but it was 2am when I wrote this I didn't mean to come off that shitty. I just thought that for avoiding having to use a generator step there's a lot of glue that's being written.