Choosing a GraphQL Client: Apollo vs. Relay

September 8, 2016
Rachel Lee

Apollo vs. Relay

If you just want to see the comparison table, keep scrolling down. You won’t hurt anyone’s feelings. Probably.

You’re likely here because you’ve heard about GraphQL, the groundbreaking new way to fetch data for your applications. Maybe you’ve figured out how to set up a basic GraphQL server. (If not, check out these great articles.) Now, you’ve got to pick a client that takes advantage of your shiny new GraphQL server. You’ve probably heard of Relay and tried a tutorial. Maybe you found it confusing or difficult and didn’t realize you have other options. Well, Apollo and Relay are currently* two of the leading open-source GraphQL clients for NodeJS apps.

If only there was a quick and easy side-by-side comparison so you could make an easily informed decision on which client is right for you. Well, congratulations, you found one!

Why choose a GraphQL client?

Of course, before making such an important decision, we should discuss why we even need a GraphQL-specific client. Why can’t you just stick with whatever you’ve comfortably been using? Redux, for one, happens to work fine with GraphQL. If you’d like to spend more time simply figuring out how GraphQL works within a more familiar context like Redux, I highly recommend James Childs-Maidment’s fantastic article on Getting started with Redux and GraphQL.

However, Redux isn’t designed to maximize the benefits of GraphQL. If your goal in learning GraphQL is to really take advantage of its amazing benefits, it makes sense to also invest in a client-side technology that aims to get the most out of your GraphQL server. To this end,

Apollo and Relay both implement query and data caching in some form to further optimize requests to the GraphQL server.

This means doing lots of pre/post-processing to make “smart” requests, which Redux isn’t built to do for you. Apollo and Relay also do lots of other nice things. Instead of reading an entire compare/contrast essay about said things, here’s a neat table below.

Comparison

Apollo and Relay share many features, but they’re clearly not identical. So, here’s a breakdown of how they’re different. In order to keep this brief, I’ve included links to what I believe are good resources for more information.

FeatureApolloRelay
Key Values
  • Incrementally adoptable
  • Simple to get started with
  • Inspectable and understandable
  • Built for interactive apps
  • Community driven
  • Declarative: what data, don't worry about how or when
  • Colocations: write data dependencies right in the view
  • Mutations: data consistency, optimistic updates, and error handling
Object Identification for Caching__typename + id
(client-side, automatic)
graphql-relay globalId
(server-side, requires GraphQL schema configuration)
Query Languagegraphql-tagRelay.QL
Query Batchingbuilt-in (one-line setup + config)react-relay-network-layer
Subscriptionsyesyes(ish)
Fragmentsyesyes
Optimistic UI Updatesyesyes
PaginationArbitrary pagination schema (server-side), fetchMore (client-side)cursor-based (server-side, requires GraphQL connections configuration)
Custom Network Interfacesyesyes
Server-Side renderingyesisomorphic-relay
Performance (Caching and Query Optimizationyesyes
Routingreact-routerreact-router-relay
TestingJest (assuming you're using React)Jest
Developer ToolsRedux DevTools (chrome extension)React DevTools (chrome extension)
CompatibilityReact, React Native, Angular 2, Redux, MeteorReact, React Native
Learning Curve (Familiarity)similar to react-reduxnew material
Mutation-Writing Complexity
  • Simple GraphQL mutation w/resolve
  • Send literal mutation through Apollo client
  • Update Apollo client store
  • GraphQL mutation w/mutationWithClientMutationId
  • Match variable names between GraphQL and Relay
  • Set up fat query & configs for Relay
Documentationfantastic (with pictures!)...spotty
Open Source Stats (as of 9/1/2016)https://github.com/apollostack/apollo-client
  • Watchers: 87
  • Stars: 815
  • Forks: 61
  • Open Issues: 81
  • Pending PRs: 9
  • Commits in last month: 176
https://github.com/facebook/relay

  • Watchers: 339
  • Stars: 6,940
  • Forks: 576
  • Open Issues: 123
  • Pending PRs: 10
  • Commits in the last month: 10

Coda

Ultimately, it comes down to you and the specifics of your project. Apollo offers a friendly developer experience and works great for learning and adopting GraphQL into an existing project, especially if it doesn’t use React. Relay is being built with mobile performance and scalability–at the Facebook level–in mind.

As GraphQL continues to mature, both technologies have great communities dedicated to creating a better internet, so you can’t really go wrong with either one.

My team decided to go with Relay. Why? The Relay team at Facebook is hard at work on some major improvements, and the future of Relay looks pretty bright. Also, because Relay and GraphQL are both developed at Facebook, we expect any updates for GraphQL will be supported faster by Relay 2 than Apollo.

Make your choice: Get started with Apollo or Get started with Relay

If you were hoping for more words to read, check out some of the many links throughout this post. They’re dedicated to more specific topics about GraphQL, Apollo, and Relay. Also, keep an eye out for a follow-up article exploring key changes between Relay and Relay 2!

Posted by Rachel Lee, Software Engineer

About the Author

Rachel studied Computer Science and Cognitive Science at UC Berkeley and is currently working for Codazen as a software engineer.

She holds festive apple pie baking parties and has a big cheeky dog that snores and likes to nap on people’s feet.

8 Comments. Leave new

Thanks 🙂 (Where’s the ‘like’ button? 😉 )

Reply
Sashko Stubailo
September 20, 2016 4:14 pm

Disclaimer: I work on Apollo.

> Also, because Relay and GraphQL are both developed at Facebook, we expect any updates for GraphQL will be supported faster by Relay than Apollo.

It’s interesting that this hasn’t turned out to be the case in practice. Relay 1, in particular, included some limitations from old internal versions of GraphQL at Facebook, including only being able to pass one argument to a root query field, special fields like mutationClientId, and more. It will be interesting to see how this might change with Relay 2.

Really great comparison chart! It’s clear that a lot of work went into this article!

Reply

Thanks Sashko, it was a really difficult process to choose the right GraphQL client for us. I’ve edited the statement to refer to Relay 2, specifically. In any case, I look forward to seeing how both Apollo and Relay 2 progress!

Reply

“Apollo offers a friendly developer experience and works great for learning and adopting GraphQL into an existing project, especially if it doesn’t use React.”

What is the implication of this for people considering upgrading Meteor/Blaze to React while wanting to use Apollo/GraphQL?

Reply

I can’t say from personal experience, but Apollo is designed to work well with either Meteor or React. There’s a list of example projects on Apollo’s website you might want to check out.

Reply
Andrew Henderson
March 23, 2017 4:00 pm

Wonderfully written and succinct. Thank you for taking the time to write this!

Reply
Andrew Henderson
March 23, 2017 4:06 pm

As a followup question:

Can Redux be used in conjunction with Relay, handling user interactions and client-side only state?

What do you recommend for handling client-side only state when using Relay?

Reply

Hi, Rachel!

Are you also planning an updated article now that Relay Modern has been released?

I would love to chat with you about your experience with GraphQL in general so far and how the adoption internally went. What’s the best way to reach you?

Thanks

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Get More. Subscribe to our Technical Blog.

SUBSCRIBE