Fluent GraphQL clients: how to write queries like a boss
“I'm writing an appeal to the faculty senate so that I can move on from string theory,” says Sheldon in The Big Bang Theory.
If you work with GraphQL, you may not have a beef with string theory, but you may still feel the pain of string query. We all have days when we want to move on from strings.
Wouldn’t it be nice if we could write GraphQL queries as objects instead of strings? It turns out we can do exactly that, with fluent GraphQL clients!
Fluent APIs aim to make code more readable via method chaining by returning
self from each method. This will look familiar thanks to jQuery:
$("#iReturnThis").html("I also return this").addClass("me-three");
Fluent GraphQL clients allow you to write your query as an object, which they then convert to a good old string query behind the scenes. In addition to freeing you from strings, they offer:
- strong typing,
- a single source of truth for type definitions,
- autocomplete all the things!
Let’s see some examples. We’ve created a companion repo for you to reference as you read along: Awesome Fluent GraphQL
graphql-binding allows you to invoke a binding function which constructs a GraphQL request.
mst-gql allows type reuse between GraphQL and MobX-state-tree, and generates a query builder for chaining.
Hasura + Fluent GraphQL Clients
As a Hasura user, this means you get even more superpowers than you already have. If you’re building an app with TypeScript, for instance, fluent GraphQL clients will give you object queries, type definitions, autocompletion, and all of the other goodies we talked about. And if you’re building custom business logic for Hasura using actions or remote schemas, you get a convenient data API to work with!
Have fun playing around with these and choosing your favorites 💃
If we missed anything, add it to our Awesome Fluent GraphQL list, and add your examples to the repo as well!