GraphQL Typesafe Clients - How & Why to Adopt
Transcript
Gavin
Hey everybody, my name is Gavin Ray. I'm a community engineer and evangelist at Hasura. And today we're going to do a brief overview of A New Breed of Typesafe GraphQL Clients. So before we get into this, those of you who may be new the ecosystem, it's good to maybe have some background context. When GraphQL was still new, 2015-2016, and you wanted to have Typesafe interactions with your client, what that would look like is really something like this.
Gavin
You didn't have any kind of tooling available for you to auto generate things. So there was a lot of manual interface writing. You were declaring fetch functions and just writing it yourself and it was very, very Java-ey. A lot of manual repetition and that was just the state of things. So you fast forward some years, and around 2018, at this point, Facebook has their relay TS compiler plugin. We start to see GraphQL code gen emerge, and these tools are revolutionary because what they allow you to do is sort of develop schema first or database model first. So your database and your schema become the source of truth. And your client code is generated from that, which just reduces errors and increases developer productivity, and is fantastic. And this code is safe.
Gavin
So GraphQL code gen, if you aren't familiar with it, fantastic tool. The way that it works is that it takes a schema. You have some operations inside of your client application, specific operations, and you have plugins for languages or tools you want to integrate with. And it generates specific operations that have the requests and response types just for those particular operations, because it sort of introspects them.
Gavin
But now we have something which I assume you're attending because you saw this, that is a little bit different, and there's a recent set of libraries that sort of lean on TypeScript compiler. And what they're able to do is take your schema, and they generate a single client, and what they do is they take an input object and they can dynamically infer the return type based on the arguments you pass for selection sets and input parameters. And so instead of manually writing a bunch of queries and then having to refactor them if your schema changes, you just run one CLI command and this entire SDK is generated.
Gavin
It contains your whole database or GraphQL API schema in it, and it's fully Typesafe. And this is really stellar. So what are these tools and where do you get them? Which is I'm sure why you're watching this. So I am aware of, and I have used, two libraries with this pattern. So the first is a library called GraphQL Zeus, and it's at this URL, we'll share the link. And the other one is a library called GenQL by a person named Remorses. They're very similar, I evaluate them both. And you're probably wondering, "Well, how do I use this? What, what does it integrate with?" And the answer is it integrates with everything.
Gavin
And that probably sounds ridiculous, but I'm going to explain how and why that's possible and show you how we integrate that with Hasura using an example of Apollo client and React. So what I have here is an Apollo Client being pulled in TypeScript, and then a generated GraphQL Zeus type that was run using just a single command against our Hasura URL.
Gavin
And what has been created are just wrapper functions around the use hooks. And you have these value types that extend your query, your operation, your mutation route, and it sort of leverages TypeScript's ability to inference and work with generics to return a response. And the reason why this works is because what "Zeus.query" does here is just it takes an object and it returns a query string, and then GQL just returns a GraphQL node. So you can feed this into any tool, any HTTP client, and it'll run perfectly. And so what you see here are both the React and the React component and the non-component, non-hook, route methods of Apollo Client. So yeah, I hope you found this presentation useful.
End of transcript
Description
A new generation of GraphQL typesafe clients have emerged (like 'gql-zeus' and 'genql') and their promise seems compelling. Join Gavin Ray, Community Engineer at Hasura, as he explores why you should be adopting these into your workflows immediately. There is a specific adoption pattern for use with Hasura, and integration with clients, and it is game-changing. Queries, subscriptions, mutations all manifest right in your editor. Your developer experience is going to fundamentally change for the better!
