Gerard Sans | Axiom 🇬🇧 PRO
Founder of Axiom Masterclass, professional trainings // Forging skills for the new era of AI. GDE in AI, Cloud & Angular. Building London's tech & art nexus @nextai_london. Speaker | MC | Trainer.
Relay Modern or Apollo?
slides.com/gerardsans | @gerardsans
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
Relay Modern or Apollo?
By Gerard Sans | Axiom 🇬🇧
Relay Modern or Apollo?
New project starts. Everyone is excited. GraphQL is on the stack. Yay! Life is good! Suddenly someone pops the question. So which GraphQL Client should we use? What do you mean? Oh, nooo! Don’t worry I’ve got your back. In this talk I am going to put these two under the microscope and find out what are they best at, what features they share and, most importantly, what are their key differences! You can relax.
