Relay Modern or Apollo?

slides.com/gerardsans |  @gerardsans

Asset 3
Asset 8

Google Developer Expert

Master of Ceremonies

Blogger

International Speaker

Spoken at 50 events in 17 countries

Trainer

Community Leader

1K

React In Flip Flops

Timeline

2012

GraphQL created at Facebook

2015

GraphQL is open sourced

Relay Classic is open sourced

2016

New GraphQL website graphql.org

First GraphQL Summit

GitHub announces GraphQL API

2017

Relay Modern 1.0

Apollo Client 1.0

launchpad.graphql.com

graphql.com

summit.graphql.com

Relay Modern

Overview

  • Maintained by Facebook
  • Latest release: 1.3 (12 days ago)
  • Integrations: React
  • GitHub: 9.5K stars

Main features

  • Focused on Performance
    • Relay compiler/babel plugin
    • Optimisations
  • Facebook abstractions
    • Colocation
    • Custom Store
      • Connection, Records, Fields
    • Viewer, Pagination

Apollo Client

Overview

  • Maintained by Meteor
  • Latest release: 1.9.2 (8 days ago)
  • Integrations: React, Angular, Vue
  • GitHub: 3.8K stars

Main features

  • Community driven
  • Simplicity
    • Redux store
  • Integration with frameworks

Apollo 2.0

  • Modular and 20-30% smaller
  • Network layer based on Observables
    • Support @live and @defer
  • Custom stores
  • Faster
    • New cache for large data sets
  • Easy migration

Instagram Clone

Schema

type Post {
  description: String!
  imageUrl: String!
}
npm install --global graphcool
graphcool init
graphcool push
graphcool console

graphcool-cli

Setup

  • Relay compiler/ Babel plugin
  • Environment
    • Network
    • Store
  • Via attribute
  • Loader graphql-tag
  • ApolloClient
    • Network Interface
  • ApolloProvider HOC

Setup

Queries

Queries

source: blog

  • QueryRenderer
    • Environment
    • Query
  • Queries generation
    • Automated
  • Opinionated
  • graphql HOC
  • Queries generation
    • Manual
  • Flexible

Queries

Mutations

Mutations

source: blog

  • commitMutation
    • Environment
  • Update Store via
    • Connection
    • Fields/LinkedRecord
  • Optimistic Updates
  • Added via props
  • graphql HOC/mutate
  • Update Store via reducer/arguments
  • Optimistic Updates

Mutations

Subscriptions

Subscriptions

source: blog

  • requestSubscription
    • Environment
  • Update Store via
    • Connection
    • Fields/LinkedRecord
  • subscribeToMore
  • Update Store via reducer/arguments

Subscriptions

Final Round

  • Awesome option
  • Familiar with Facebook-way
    • Viewer/Connector
    • Pagination
  • Schema with lots of fragments
  • Awesome option
  • May need other Frameworks
  • Familiar with Redux
  • Less concepts to learn

Final Round

More

gsans/reactnext

Asset 3
Asset 8