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 this or 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

gotql works like a transpiler, with a built-in HTTPRequest Client (Got), allowing you to write your GraphQL queries as objects instead of strings | Example repo

graphql-zeus creates an autocomplete client library for JavaScript or TypeScript | Example repo

With gqless, your queries are auto-generated at runtime! Using ES6 Proxies, gqless converts object property lookups into GraphQL queries. | Example repo

graphql-typed-client generates a strongly typed client library for any GraphQL endpoint. It allows writing queries as plain JS objects, with optional chain syntax. | Example repo

typed-graphqlify lets you build typed GraphQL queries in TypeScript, and avoid redundancy of type definitions. | Example repo

graphql-codegen-hasura is a collection of plugins for graphql-code-generator, with strongly typed wrappers for all the Hasura GraphQL methods. | Demo @ graphql-codegen-hasura

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.

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!