GRAPHQL & RELAY PART DEUX

INDYJS MEETUP JUNE 2016

GRAPHQL

GRAPHS PERSON [NAME, ID, …]

STARSHIP-A [ID, MANUF,..]

STARSHIP-B [ID, MANUF,..]

STARSHIP-C [ID, MANUF,..]

PILOT-A [ID, NAME,..]

STARSHIP CONNECTION

STARSH

IP CONNECT

ION

STARSHIP CONNECTION

PILOT CONNECTION

HOMEWORLD-A [ID, NAME,..]

HOMEWORLD CONNECTION

HOMEWORLD CONNECTION

NODE

NODE

EDGE

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.

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.

RELAY

REACT/FLUX/REDUX

RELAY

FLUX/REDUX

ACTION STORE COMPONENTS

ACTION

RELAY STORE

COMPONENTS

ACTIONRELAY

SERVER

GraphQL Write (mutation)

Optimistic Update

GraphQL Query

GraphQL Response

TEXT

FOLLOW ALONG!

▸ https://facebook.github.io/relay

RELAY

EXAMPLE: SIMPLE - HELLO WORLD - SCHEMA

RELAY

EXAMPLE: SIMPLE - HELLO WORLD -COMPONENTS

RELAY

EXAMPLE: LIST - GRAPHQL SCHEMA

RELAY

EXAMPLE: LIST - COMPONENTS

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/

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

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

TEXT

DEBUGGING

▸ Your own network layer, turn on Relay transport logging in debug

▸ Web sockets

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”

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

TEXT

DATA LOADER - EXAMPLE

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

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.

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/

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

GRAPHQL & RELAY

RESOURCES

▸ Cartoon Guides To GraphQL & Relay: https://code-cartoons.com

▸ Awesome GraphQL - curated list on Github: https://github.com/chentsulin/awesome-graphql

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#/

QUESTIONS??? ▸ Twitter: @BradPillow, GitHub: pillowsoft

THANKS!