Part 2 of my Indy JS Meetup presentation on GraphQL and Relay, this time covering mostly Relay with a wee bit of DataLoader.

1. GRAPHQL & RELAY
PART DEUX
INDYJS MEETUP JUNE 2016

2. GRAPHQL
GRAPHS PERSON
[NAME, ID, …]
STARSHIP-A
[ID, MANUF,..]
STARSHIP-B
[ID, MANUF,..]
STARSHIP-C
[ID, MANUF,..]
PILOT-A
[ID, NAME,..]
STARSHIPCONNECTION
STARSHIPCONNECTION
STARSHIP CONNECTION
PILOT CONNECTION
HOMEWORLD-A
[ID, NAME,..]
HOMEWORLD CONNECTION
HOMEWORLDCONNECTION
NODE
NODE
EDGE

3. RELAY
RELAY
▸ GraphQL was not invented to enable Relay. In fact, GraphQL
predates Relay by nearly three years. It was invented during
the move from Facebook's HTML5-driven mobile
applications to purely native applications. It is a query
language for graph data that powers the lion's share of
interactions in the Facebook Android and iOS applications.
Any user of the native iOS or Android app in the last two
years have used an app powered by GraphQL.

4. RELAY
WHAT RELAY PROVIDES
▸ DECLARATIVE
▸ Declare what you want and let Relay
and GraphQL worry about requests,
validation and caching.
▸ COLOCATION
▸ Keep queries with the code to display
them.
▸ MUTATIONS
▸ Change data on the server and get
automatic data consistency, optimistic
updates and error handling.

5. RELAY
REACT/FLUX/REDUX

6. RELAY
FLUX/REDUX
ACTION STORE COMPONENTS
ACTION
RELAY STORE
COMPONENTS
ACTIONRELAY
SERVER
GraphQL Write (mutation)
Optimistic
Update
GraphQL Query
GraphQL Response

7. TEXT
FOLLOW ALONG!
▸ https://facebook.github.io/relay

8. RELAY
EXAMPLE: SIMPLE - HELLO WORLD - SCHEMA

9. RELAY
EXAMPLE: SIMPLE - HELLO WORLD -COMPONENTS

10. RELAY
EXAMPLE: LIST - GRAPHQL SCHEMA

11. RELAY
EXAMPLE: LIST - COMPONENTS

12. RELAY
EXAMPLES: PARAMETERS & MUTATIONS
Relay query fragments can be parameterized using variables in GraphQL calls.
This enables mechanics like pagination, filtering, sorting, and more.
Use Relay to change the world through the use of GraphQL mutations. Given a
set of query fragments, a mutation, a query that represents all parts of the world
that might change as a result of this mutation (the ‘fat query’), and a set of
behaviors to exhibit when the server responds (the ‘query configs’), Relay will
ensure that all of the data necessary to perform the mutation has been fetched,
and that your client-side data stays in sync with the server after the mutation.
Try the examples out here: https://facebook.github.io/relay/

13. RELAY
EXAMPLES: ROUTING
▸ Relay Router - what Facebook uses
▸ Not a nested router :-(
▸ Yay!!! Someone modified react-router to be compatible with
relay: https://github.com/relay-tools/react-router-relay

14. RELAY
SUBSCRIPTIONS
▸ Still being fully defined, Facebook only uses 3 in their React-
Native apps
▸ You can roll your own as I did
▸ Think of subscriptions as mutation observables (mapped by
subscription ID) on the server side. When an observable
changes, notify client and perform a local mutation (force
update).
▸ Another option: use forceUpdate on route changes in react-
router-relay

15. TEXT
DEBUGGING
▸ Your own network layer, turn on Relay transport logging in
debug
▸ Web sockets

16. RELAY
RELAY MISUNDERSTANDINGS
▸ Id’s - they’re needed from GraphQL to handle cache
coherency and management
▸ if you don’t provide “global ids” then Relay won’t work correctly
▸ How can I refresh my data if the server data changes?
▸ Subscriptions - new and experimental
▸ Can also force a “refetch”

17. TEXT
DATA LOADER
▸ Way too many hits to my
database
▸ Data loader is basically a
simple caching
mechanism
▸ Example: deeply nested
queries can result in
multiple database
queries for the same
data

18. TEXT
DATA LOADER - EXAMPLE

19. TEXT
LOCAL RELAY
▸ If you look at Relay, it seems a lot like Redux
▸ Idea: can we use Relay to replace redux?
▸ Perhaps: - https://github.com/relay-tools/relay-local-schema
▸ How about local and remote….sure: Relay Composite
Network Layer - https://github.com/eyston/relay-composite-
network-layer

20. TEXT
METEOR/APOLLO/REDUX
▸ The Meteor guys have seen the light!
▸ They are migrating to GraphQL and towards backend
database agnostic
▸ But wait…they are doing their own client called Apollo
▸ Apollo uses Redux as it’s local Graph store
▸ Gets you all the goodness of Redux(time travel, dev tools, etc.)
▸ Very early beta…probably not good to deploy with presently.

21. TEXT
SERVERLESS GRAPHQL
▸ ReIndex - GraphQL Cloud Service - https://www.reindex.io/
▸ Alas, no subscriptions
▸ AWS Lambda - https://github.com/serverless/serverless-
graphql
▸ Google Cloud Functions - https://cloud.google.com/functions/
docs/

22. TEXT
MORE TO LOOK AT…
▸ Firebase
▸ RethinkDB/Horizon
▸ GraphQL Hub - Reddit, Hacker News, GitHub, etc. - https://
www.graphqlhub.com/
▸ Graffiti - Node.js GraphQL ORM - https://github.com/
RisingStack/graffiti - Mongoose to GraphQL

23. GRAPHQL & RELAY
RESOURCES
▸ Cartoon Guides To
GraphQL & Relay: https://
code-cartoons.com
▸ Awesome GraphQL -
curated list on Github:
https://github.com/
chentsulin/awesome-
graphql

24. GRAPHQL & RELAY
MORE RESOURCES
▸ Relay Home: https://facebook.github.io/relay/
▸ GraphQL Home: http://graphql.org/
▸ GraphQL Spec: https://facebook.github.io/graphql/
▸ Many REST APIs you can experiment with using GraphQL:
https://www.graphqlhub.com/
▸ React Playground - Try It Live: https://facebook.github.io/
relay/prototyping/playground.html#/

25. QUESTIONS???▸ Twitter: @BradPillow, GitHub: pillowsoft
THANKS!