Picking a GraphQL Client#

There are a bunch of GraphQL clients that exist. How do you know which one is right for you? I’m going to discuss some of your options, but let’s cut to the chase:

If you’re building a front-end web-app, I recommend you use Apollo Client. If you want to take my recommendation, you can just skip this post. 

But for those of you who are making a years-long, fundamental architectural decision for your team - you might want to read below to get a lay of the land.

GraphQL is just JSON over HTTP (well, usually)#

Because GraphQL servers are typically over HTTP, you don’t have to use a client library at all. You can just use whatever HTTP request library you were already using and it will “work”. 

GraphQL is in this sense, more of a language/protocol pair than a specific library and it will work fine in any language where you can form queries and parse JSON - making it suitable for mobile apps, compiled clients, etc. 

So as we covered in the first chapter, you can query a GraphQL server using curl,

The operationName here is the name of your query.

With curl, it would look like this:

where the ... is replaced by the JSON string from above

So why bother with a dedicated client?

Why You Might Want a Dedicated GraphQL Client#

The big reason is because of caching.

Because our data is typed, and has a specific schema, intelligent clients can leverage that to cache data in clever, optimized ways.

For example, an object that is loaded by one query may already have been cached by a previous, completely different query. And in these cases, the client can read from the cache instead of fetching from the server - resulting in a snappier user experience.

There are lots of other nice features a dedicated client might have, too. Such as:

• Middleware

• Subscriptions

• File upload handling

• Server-side rendering support

• Authentication

• Optimistic updates

• Developer tools

• Testing libraries

All of the above can add up to a real-world advantage in programming time compared to just forming manual HTTP requests every time.

So What Are The Options?#

So if you want to use a dedicated client, what are your options?

Here’s a few:

• graphql-request - a super minimal, no frills client

• urql a lightweight, but batteries-included GraphQL client for React-like frameworks

• Relay Modern a full-featured GraphQL client library which is great if you are Facebook

• Apollo Client today’s de-facto standard GraphQL library - works w/ React, Angular, Vue, etc.

Let’s look a little closer at each one:

graphql-request#

graphql-request is a JavaScript library that, as it’s namesake, makes it easy to make GraphQL requests.

Here’s what the code looks like, taken straight from the documentation

What’s good:

• it’s lightweight

• it works with any JavaScript web framework

• it works in the browser or in node

The drawbacks:

It is super minimal - it doesn’t have any caching or most of the advanced features you’d get out of any of the clients below.

Summary:

It’s a great fit if you just want to make some quick requests without a lot of fuss.

urql#

urql gives you solid, lightweight choices in the default configuration, but is build to expand as you grow.

They have a nice page on the philosophy of urql where they say:

By default, we aim to provide features that allow you to build your app quickly with minimal configuration. urql is designed to be a client that grows with you.

Here’s an example of making a query in a React app, taken from their documentation

Above, you can see that they call the useQuery hook to load the TodosQuery and then use that result in the rendered JSX.

What’s good:

• it’s flexible

• it has great defaults

• it has a growing ecosystem of plugins

• it has a small bundle size of just 23kb

The drawbacks:

As of writing, only supports React, Svelte, and Preact.

It’s the “2nd place” option, with all of the benefits and drawbacks of that role. 

Also, while it’s lightweight to get started, you might find you’re adding so many add-ins that it would have been easier to just use Apollo.

Summary:

A solid library, with critical community mass, from a great team. It’s a good option.

Relay Modern#

Relay Modern a full-featured GraphQL client library and the original inspiration for Apollo. 

What’s good:

• it’s the original inspirational GraphQL and React library

• it has real-world performance characteristics and has been tested at Facebook

• it’s tightly integrated with React

The drawbacks:

• it is highly opinionated in how you structure your components

• it is also opinionated on it’s convention for pagination

• lower community adoption than you’d expect

Summary:

An inspirational, tightly-React-integrated library with many good characteristics, but generally not used as widely as you’d expect, in part because it's opinionated and in part because Apollo took a huge amount of mindshare between Relay 1 and Relay Modern.

I imagine that Relay Modern will ship a version that gets broader community adoption. Almost everyone I know in the industry that would use Relay is using Apollo instead. If you’re new to GraphQL and you’re trying to decide between Relay and Apollo, and you don’t know the difference, 9-times-out-of–10 you want Apollo.

Apollo Client#

Like I mentioned above, Apollo Client today’s de-facto standard GraphQL library - works w/ React, Angular, Vue, etc.

What’s good:

• it’s batteries included

• everyone else uses it - so there’s tutorials, plugins, etc.

• it supports more than React

• it just works

The drawbacks:

It’s relatively “heavy”. If you run into trouble, it’s a bit of a black box. 

Summary:

I use Apollo for newline and I’ve been incredibly happy. As often happens in open-source, there’s ecosystem benefits with going with the leader.

There are more tutorials, bugs are fixed faster, and it’s an overall pleasant experience.

Apollo also has tooling for building servers, so it’s a bit of a one-stop-shop for GraphQL services.

What to Choose?#

It’s pretty obvious that I’m an Apollo fan. While there might be better choices for certain scenarios, if you’re building a straightforward web app, my recommendation is Apollo client.