Full-Stack TypeScript with tRPC and React

https://www.robinwieruch.de/react-trpc/

by mariuz • 3 years ago

65 55 3 years ago

robinwieruch.de

mariuz• 3 years ago

archive.org link in case site is down

https://web.archive.org/web/20230307144631/https://www.robin...

bigfoot675• 3 years ago

Very 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

ushakov5• 3 years ago

If 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

(disclaimer: I'm author of Garph)

noughtme• 3 years ago

Hmmm... 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.

ushakov5• 3 years ago

Yes!

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!

thdxr• 3 years ago

took a quick look - does this differ meaningfully from pothos?

ushakov5• 3 years ago

Great 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

arnorhs3• 3 years ago

This sounds pretty slick. I need to give this a try

satvikpendem3• 3 years ago

I 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?

Wissmueller3• 3 years ago

Perfect 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.

kamilafsar4• 3 years ago

Shameless 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

Comparison: https://phero.dev/docs/comparisons/tRPC

ushakov5• 3 years ago

As 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!

kamilafsar4• 3 years ago

Yes, 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 :)

ctvo4• 3 years ago

Stop assuming data is of the type you’re expecting. You know it is, period.
Know when you break compatability with the frontend, before even running it: TypeScript has your back.

Do you? Your front-end and back-end, regardless if they use the same source for their interface contract, aren't deployed as a unit. At least not always, and not in the single page application use cases you're targeting.

How do you handle versioning and protocol compatibility? Across all these frameworks, it feels like a footgun your users will discover on their own.

Wissmueller3• 3 years ago

Across all these frameworks, it feels like a footgun your users will discover on their own

Exactly. tRPC and other projects alike don’t provide you an actual API that you can later consume, but an RPC “glue”

kamilafsar4• 3 years ago

Good point!

We use Phero extensively in mobile apps projects, so we know the pain of maintaining API versions and backward compatibility hell.

Phero generates a declaration file with all functions you expose, and bundles dependent domain models (interfaces, type aliases, enums, etc) with it. Currently there's only one version. Our plan is to let users pin versions of this declaration file (we call it the manifest file).

Then we build cli commands to compare them and actually tell if they are compatible. This way you know if it's safe to deploy a new version of your API without breaking existing clients. These are all future plans of course, but in the scope of the project.

jitl2• 3 years ago

I like this approach of using the Typescript compiler API to produce the runtime type validator from the TS type, instead of the other way around! I started working on a toolkit to compile Typescript types to arbitrary downstream languages like Protobuf and Python/MyPy, but the last 20% of polish eludes me. My work is here: https://www.npmjs.com/package/@jitl/ts-simple-type

ctvo4• 3 years ago

Can 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.

thinkingkong2• 3 years ago

The 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__• 3 years ago

How does a TypeScript based codebase not have a build step?

rcfox• 3 years ago

I'm currently working on a project with Typescript and gRPC. It's mostly great, but I'm somewhat disappointed with the generated code.

The frontend and backend get code generated differently. The backend is all interfaces (which, through some Nestjs magic get translated into protobufs) and the frontend is all objects. So on the frontend, you're expected to write:

    const message = new MyRequest().setName('Bob').setFoo('bar');

On the backend, you'd just write:

    const message = { name: 'Bob', foo: 'bar' }

It's not a big deal, but it's weird. The backend ends up being more/overly strict about all values being set when you might just be fine with the default zero/empty values.

Also, using a `oneof` field is correctly typed on the frontend as

    myfield: TypeA | TypeB | TypeC`

But the backend gives you

    myfield: {a: TypeA | undefined, b: TypeB | undefined, c: TypeC | undefined}

For a future project, I'd look into buf or Connect instead of the default gRPC code generators, but for now, I just need to get stuff done.

tczMUFlmoNk• 3 years ago

Also, using a `oneof` field is correctly typed on the frontend as

    myfield: TypeA | TypeB | TypeC

But what about when the `oneof` has multiple variants with the same base type? Like:

    message User {
        oneof contact_info {
            string email = 1;
            string phone_number = 2;
        }
    }

Does this get compiled down to `contact_info: string | string` on the frontend? How do you tell which variant was used without encoding the discriminant?

azangru2• 3 years 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?

ctvo4• 3 years ago

I 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?

mattwad• 3 years ago

I tried gRPC with Typescript once, and we needed transformers to transform gRPC to something usable - there's no optional fields in the v3 version for example. So we ended up with an extra layer on reading and writing to it, which was hard to test thoroughly. My learnings were that gRPC is for compressing data, not type-safety. The type-safety is kind of just a necessity to get the compression to work, but it is not very expressive.

matthewfcarlson• 3 years ago

I 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• 3 years ago

Could 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-usin...

alexdotjs3• 3 years ago

Here's an example of testing: https://github.com/trpc/examples-next-prisma-starter/blob/ma...

vyrotek• 3 years ago

I 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.

Wissmueller3• 3 years ago

Me too! Here are more tRPC-like projects:

- ts-rest (https://ts-rest.com)

- Garph (https://github.com/stepci/garph)

- zodios (https://www.zodios.org)

- Kysely (https://github.com/koskimas/kysely)

Scarbutt• 3 years ago

But with BFF you still need APIs? backend servers to serve the frontend servers.

satvikpendem3• 3 years ago

If 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/

denysonique2• 3 years ago

For APIlessness I highly recommend Telefunc[1] over tRPC. Telefun is seamless. 1: https://telefunc.com/

throwaway4good• 3 years ago

That 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?

denysonique2• 3 years ago

Yes, without any problems. It scales really well.

nathias• 3 years ago

a string by any other name

bastardoperator• 3 years ago

I'd recommend https://create.t3.gg/, it bundles trpc, prisma, nextjs, etc...

dstroot• 3 years ago

Thanks 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• 3 years ago

They 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• 3 years ago

tRPC 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.

vosper2• 3 years ago

Note 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

Already__Taken2• 3 years ago

Seems to promise less boilerplate than postgraphile but it doesn't look it.

Already__Taken2• 3 years ago

Too 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.

Full-Stack TypeScript with tRPC and React

Related Stories