Apollo vs Relay Modern: An unbiased look at which GraphQL client to use

Max Rozen
Max Rozen
Sep 29, 2019 · 4 min read

Do you even need a GraphQL client?

First things first — depending on how large your application is, and what you’re trying to achieve with GraphQL, you may not even need a GraphQL client.

If you’re just testing the waters with GraphQL and don’t want to change your existing app too much, you can just use fetch like so:

fetch('/graphql', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
},
body: JSON.stringify({query: "{ hello }"})
})
.then(r => r.json())
.then(data => console.log('data returned:', data));

The main benefit to adopting a GraphQL client is the cache implementation. Using fetch is fine to begin with, but you don’t want to be using it in a data-heavy app where users quickly jump between views.

In OnlineOrNot we use Apollo to cache query results — which gives us quite a noticeable boost in performance.

How it works in practice:

You view a list of websites: this list of websites is now cached in memory, for example:

[
{
id: '123',
url: 'https://onlineornot.com'
},
{
id: '124',
url: 'https://maxrozen.com'
}
]

You then choose to review incidents for your first website. As the GraphQL client already knows the id and url, it doesn't need to refetch this data. It only needs to fetch the array of incidents, as shown below:

[
{
id: '123',
url: 'https://onlineornot.com'
incidents: [
{
id: '1',
dateStart: '2018-01-01',
dateEnd: '2018-01-01'
}
]
}
]

As you now have the list of websites, and a list of incidents for the first website, clicking back in your browser to view the list of websites is instant, as no GraphQL request is made.

Essentially, the more the user clicks around your application, the faster your user experience becomes.

Apollo Client

The setup is considerably easier than Relay — it involves installing one package, and adding the ApolloProvider to the root of your React tree.

The API is nice — they have an equivalent to Relay’s QueryRenderer called Query that does what it says:

<Query
query={gql`
{
rates(currency: "USD") {
currency
rate
}
}
`}
>
{({ loading, error, data }) => {
if (loading) return <p>Loading...</p>;
if (error) return <p>Error :(</p>;

return data.rates.map(({ currency, rate }) => (
<div key={currency}>
<p>{`${currency}: ${rate}`}</p>
</div>
));
}}
</Query>

It can also be used to manage state in your React app — that is, you can directly write to Apollo’s Redux-like store and consume that data in another part of the React tree. Though with React’s new Context API, and React’s best practices of Lifting State Up you probably won’t need it.

import React from 'react';
import { ApolloConsumer } from 'react-apollo';

import Link from './Link';

const FilterLink = ({ filter, children }) => (
<ApolloConsumer>
{client => (
<Link
onClick={() => client.writeData({ data: { visibilityFilter: filter } })}
>
{children}
</Link>
)}
</ApolloConsumer>
);

Downsides to Apollo

  • It’s huge. It weighs in at 10x more than the smallest GraphQL client I’d consider using, and 4x more than urql

On Bundle size

One of the biggest complaints I hear about adopting Apollo is the bundle size (Apollo Boost, the “easiest way to get started with Apollo Client” weighs in at 25.2 kB min+gzipped), so luckily there are also alternative lightweight clients to consider:

  • Formidable Labs’ urql — 6.3kB min+gzipped (with perhaps the best README I’ve ever seen)
  • Prisma’s graphql-request — 4 kB min+gzipped
  • Adam Rackis’ micro-graphql-react — 2.8kB min+gzipped

Quirks

Apollo is not without quirks however:

  • Since Apollo uses id to build its cache, forgetting to include id in your query can cause some interesting bugs and error messages

Relay

Setup

The main benefit to using Relay is that relay-compiler doesn't get included in your frontend bundle, saving your user from downloading the whole GraphQL parser - it "pre-compiles" the GraphQL queries at build time.

What annoys me about Relay is that it requires a fair bit of work to even add to a project. Just to get it running on the client side, you need to:

  • add a relay plugin to your .babelrc config
  • set up relay-compiler as a yarn script
  • setup a “relay environment” (essentially your own fetch utility to pass data to the relay-runtime), and
  • add QueryRenderer components to the React Components you wish to pass your data to

On the server side, you need to:

  • Ensure the IDs your app returns are unique across all of your types (meaning you can’t return nice ID values like 1, 2, 3, they need to be like typename_1, typename_2)

Developer Experience

The developer experience itself is pretty unpleasant too — relay-compiler needs to run each time you modify any GraphQL query, or modify the schema. In large frontend teams this means teaching everyone to run relay-compiler every time you change branches in Git, since almost all of our work involves fetching data from GraphQL in some way.

Update: Thanks to relay-compiler-webpack-plugin you no longer need to remember to re-run the relay-compiler every time you make a change, webpack will do it for you.

Quirks

Being one of Facebook’s Open Source projects doesn’t necessarily mean issues get fixed quickly. Occasionally, things break in unexpected ways:

In Summary

If I were starting a new project today at the end of 2019, I’d use Apollo Client by default.

If my users were using cellular data, bandwidth constrained, or using lower-spec devices, I would opt to use urql instead.

I wouldn’t bother rewriting an application from Relay to Apollo. There are benefits, mainly from developer experience/ergonomics of the API, but not enough to outweigh the cost of rewriting.


Originally published at https://onlineornot.com on September 29, 2019.

Max Rozen

Written by

Max Rozen

I’m a Software Engineer that contracts, and runs https://OnlineOrNot.com and https://PerfBeacon.com on the side.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade