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 

 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 

{
  query: "query MyQuery { viewer {name} }",
  variables: {},
  operationName: "MyQuery"
}

curl \
  -X POST \
  -H "Authorization: Bearer $AUTH_TOKEN" \
  -H "Content-Type: application/json" \
  --data '...' \
  https://github.com/graphql

 is replaced by the JSON string from above

Why You Might Want a Dedicated GraphQL Client

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 

 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:

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 if you want to use a dedicated client, what are your options?

Let’s look a little closer at each one:

 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 

import { request, gql } from 'graphql-request'

const query = gql`
  {
    Movie(title: "Inception") {
      releaseDate
      actors {
        name
      }
    }
  }
`

request('https://api.graph.cool/simple/v1/movies', query)
  .then((data) => console.log(data))

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.

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

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

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, 

import { useQuery } from 'urql';
const TodosQuery = `
 query {
 todos {
 id
 title
 }
 }
`;
const Todos = () => {
 const [result, reexecuteQuery] = useQuery({
 query: TodosQuery,
 });
 const { data, fetching, error } = result;
 if (fetching) return Loading...;
 if (error) return Oh no... {error.message};
 return (
 <ul>
 {data.todos.map(todo => (
 <li key={todo.id}>{todo.title}</li>
 ))}
 </ul>
 );
};

 and then use that result in the rendered JSX.

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

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

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

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

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 

 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.

 standard GraphQL library - works w/ React, Angular, Vue, etc.

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

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.

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. 

<h1 data-node-type="titlePlaceholder" class="titlePlaceholder">5 GraphQL Clients and how to Pick One</h1><h1><a name="picking-a-graphql-client" id="picking-a-graphql-client">Picking a GraphQL Client</a></h1>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.&nbsp;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.<h2><a name="graphql-is-just-json-over-http-well,-usually" id="graphql-is-just-json-over-http-well,-usually">GraphQL is just JSON over HTTP (well, usually)</a></h2>Because GraphQL servers are typically over HTTP, you don’t&nbsp;have&nbsp;to use a client library at all. You can just use whatever HTTP request library you were already using and it will “work”.&nbsp;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.&nbsp;So as we covered in the first chapter, you can query a GraphQL server using&nbsp;<code>curl</code>,<textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-QWrs2" id="cm-QWrs2">{
 query: "query MyQuery { viewer {name} }",
 variables: {},
 operationName: "MyQuery"
}</textarea>The&nbsp;<code>operationName</code>&nbsp;here is the name of your query.With <code>curl</code>, it would look like this:<textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-TK2JT" id="cm-TK2JT">curl \
 -X POST \
 -H "Authorization: Bearer $AUTH_TOKEN" \
 -H "Content-Type: application/json" \
 --data '...' \
 https://github.com/graphql</textarea>where the&nbsp;<code>...</code>&nbsp;is replaced by the JSON string from aboveSo why bother with a dedicated client?<h2><a name="why-you-might-want-a-dedicated-graphql-client" id="why-you-might-want-a-dedicated-graphql-client">Why You Might Want a Dedicated GraphQL Client</a></h2>The big reason is because of&nbsp;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&nbsp;already have been cached&nbsp;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:<ul><li>Middleware</li><li>Subscriptions</li><li>File upload handling</li><li>Server-side rendering support</li><li>Authentication</li><li>Optimistic updates</li><li>Developer tools</li><li>Testing libraries</li></ul>All of the above can add up to a real-world advantage in programming time compared to just forming manual HTTP requests every time.<h2><a name="so-what-are-the-options?" id="so-what-are-the-options?">So What Are The Options?</a></h2>So if you want to use a dedicated client, what are your options?Here’s a few:<ul><li><a href="https://github.com/prisma-labs/graphql-request" rel="noopener noreferrer nofollow">graphql-request</a>&nbsp;- a super minimal, no frills client</li><li><a href="https://github.com/FormidableLabs/urql" rel="noopener noreferrer nofollow">urql</a>&nbsp;a lightweight, but batteries-included GraphQL client for React-like frameworks</li><li><a href="https://github.com/facebook/relay" rel="noopener noreferrer nofollow">Relay Modern</a>&nbsp;a full-featured GraphQL client library which is great if you are Facebook</li><li><a href="https://github.com/apollographql/apollo-client" rel="noopener noreferrer nofollow">Apollo Client</a>&nbsp;today’s&nbsp;de-facto&nbsp;standard GraphQL library - works w/ React, Angular, Vue, etc.</li></ul>Let’s look a little closer at each one:<h2><a name="graphql-request" id="graphql-request">graphql-request</a></h2><a href="https://github.com/prisma-labs/graphql-request" rel="noopener noreferrer nofollow">graphql-request</a>&nbsp;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&nbsp;<a href="https://github.com/prisma-labs/graphql-request" rel="noopener noreferrer nofollow">the documentation</a><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-IQjNz" id="cm-IQjNz">import { request, gql } from 'graphql-request'

const query = gql`
 {
 Movie(title: "Inception") {
 releaseDate
 actors {
 name
 }
 }
 }
`

request('https://api.graph.cool/simple/v1/movies', query)
 .then((data) =&gt; console.log(data))</textarea>What’s good:<ul><li>it’s lightweight</li><li>it works with any JavaScript web framework</li><li>it works in the browser or in node</li></ul>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.<h2><a name="urql" id="urql">urql</a></h2><a href="https://github.com/FormidableLabs/urql" rel="noopener noreferrer nofollow">urql</a>&nbsp;gives you solid, lightweight choices in the default configuration, but is build to expand as you grow.They have a nice&nbsp;<a href="https://formidable.com/open-source/urql/docs/concepts/philosophy/" rel="noopener noreferrer nofollow">page on the philosophy of urql</a>&nbsp;where they say:<blockquote class="">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.</blockquote>Here’s an example of making a query in a React app,&nbsp;<a href="https://formidable.com/open-source/urql/docs/basics/queries/" rel="noopener noreferrer nofollow">taken from their documentation</a><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-y0WOY" id="cm-y0WOY">import { useQuery } from 'urql';
const TodosQuery = `
 query {
 todos {
 id
 title
 }
 }
`;
const Todos = () =&gt; {
 const [result, reexecuteQuery] = useQuery({
 query: TodosQuery,
 });
 const { data, fetching, error } = result;
 if (fetching) return &lt;p&gt;Loading...&lt;/p&gt;;
 if (error) return &lt;p&gt;Oh no... {error.message}&lt;/p&gt;;
 return (
 &lt;ul&gt;
 {data.todos.map(todo =&gt; (
 &lt;li key={todo.id}&gt;{todo.title}&lt;/li&gt;
 ))}
 &lt;/ul&gt;
 );
};</textarea>Above, you can see that they call the&nbsp;<code>useQuery</code>&nbsp;hook to load the&nbsp;<code>TodosQuery</code>&nbsp;and then use that result in the rendered JSX.What’s good:<ul><li>it’s flexible</li><li>it has great defaults</li><li>it has a growing ecosystem of plugins</li><li>it has&nbsp;<a href="https://bundlephobia.com/result?p=urql@1.10.1" rel="noopener noreferrer nofollow">a small bundle size</a>&nbsp;of just 23kb</li></ul>The drawbacks:As of writing, only supports React, Svelte, and Preact.<a href="https://npm-stat.com/charts.html?package=apollo-client&amp;package=urql&amp;package=react-relay&amp;from=2019-10-11&amp;to=2020-10-11" rel="noopener noreferrer nofollow">It’s the “2nd place” option</a>, with all of the benefits and drawbacks of that role.&nbsp;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.<h2><a name="relay-modern" id="relay-modern">Relay Modern</a></h2><a href="https://relay.dev/" rel="noopener noreferrer nofollow">Relay Modern</a>&nbsp;a full-featured GraphQL client library and the original inspiration for Apollo.&nbsp;What’s good:<ul><li>it’s the original inspirational GraphQL and React library</li><li>it has real-world performance characteristics and has been tested at Facebook</li><li>it’s tightly integrated with React</li></ul>The drawbacks:<ul><li>it is highly opinionated in how you structure your components</li><li>it is also opinionated on it’s convention for pagination</li><li>lower community adoption than you’d expect</li></ul>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&nbsp;would&nbsp;use Relay is using Apollo instead.&nbsp;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.<h2><a name="apollo-client" id="apollo-client">Apollo Client</a></h2>Like I mentioned above,&nbsp;<a href="https://github.com/apollographql/apollo-client" rel="noopener noreferrer nofollow">Apollo Client</a>&nbsp;today’s&nbsp;de-facto&nbsp;standard GraphQL library - works w/ React, Angular, Vue, etc.What’s good:<ul><li>it’s batteries included</li><li>everyone else uses it - so there’s tutorials, plugins, etc.</li><li>it supports more than React</li><li>it just works</li></ul>The drawbacks:It’s relatively “heavy”. If you run into trouble, it’s a bit of a black box.&nbsp;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.<h2><a name="what-to-choose?" id="what-to-choose?">What to Choose?</a></h2>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.&nbsp;

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

5 GraphQL Clients and how to Pick One

Tags

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript