graphql with relay part deux
TRANSCRIPT
![Page 1: GraphQL With Relay Part Deux](https://reader031.vdocuments.site/reader031/viewer/2022030315/588261e71a28abd40e8b6e87/html5/thumbnails/1.jpg)
GRAPHQL & RELAY PART DEUX
INDYJS MEETUP JUNE 2016
![Page 2: GraphQL With Relay Part Deux](https://reader031.vdocuments.site/reader031/viewer/2022030315/588261e71a28abd40e8b6e87/html5/thumbnails/2.jpg)
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
![Page 3: GraphQL With Relay Part Deux](https://reader031.vdocuments.site/reader031/viewer/2022030315/588261e71a28abd40e8b6e87/html5/thumbnails/3.jpg)
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.
![Page 4: GraphQL With Relay Part Deux](https://reader031.vdocuments.site/reader031/viewer/2022030315/588261e71a28abd40e8b6e87/html5/thumbnails/4.jpg)
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.
![Page 5: GraphQL With Relay Part Deux](https://reader031.vdocuments.site/reader031/viewer/2022030315/588261e71a28abd40e8b6e87/html5/thumbnails/5.jpg)
RELAY
REACT/FLUX/REDUX
![Page 6: GraphQL With Relay Part Deux](https://reader031.vdocuments.site/reader031/viewer/2022030315/588261e71a28abd40e8b6e87/html5/thumbnails/6.jpg)
RELAY
FLUX/REDUX
ACTION STORE COMPONENTS
ACTION
RELAY STORE
COMPONENTS
ACTIONRELAY
SERVER
GraphQL Write (mutation)
Optimistic Update
GraphQL Query
GraphQL Response
![Page 8: GraphQL With Relay Part Deux](https://reader031.vdocuments.site/reader031/viewer/2022030315/588261e71a28abd40e8b6e87/html5/thumbnails/8.jpg)
RELAY
EXAMPLE: SIMPLE - HELLO WORLD - SCHEMA
![Page 9: GraphQL With Relay Part Deux](https://reader031.vdocuments.site/reader031/viewer/2022030315/588261e71a28abd40e8b6e87/html5/thumbnails/9.jpg)
RELAY
EXAMPLE: SIMPLE - HELLO WORLD -COMPONENTS
![Page 10: GraphQL With Relay Part Deux](https://reader031.vdocuments.site/reader031/viewer/2022030315/588261e71a28abd40e8b6e87/html5/thumbnails/10.jpg)
RELAY
EXAMPLE: LIST - GRAPHQL SCHEMA
![Page 11: GraphQL With Relay Part Deux](https://reader031.vdocuments.site/reader031/viewer/2022030315/588261e71a28abd40e8b6e87/html5/thumbnails/11.jpg)
RELAY
EXAMPLE: LIST - COMPONENTS
![Page 12: GraphQL With Relay Part Deux](https://reader031.vdocuments.site/reader031/viewer/2022030315/588261e71a28abd40e8b6e87/html5/thumbnails/12.jpg)
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/
![Page 13: GraphQL With Relay Part Deux](https://reader031.vdocuments.site/reader031/viewer/2022030315/588261e71a28abd40e8b6e87/html5/thumbnails/13.jpg)
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
![Page 14: GraphQL With Relay Part Deux](https://reader031.vdocuments.site/reader031/viewer/2022030315/588261e71a28abd40e8b6e87/html5/thumbnails/14.jpg)
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
![Page 15: GraphQL With Relay Part Deux](https://reader031.vdocuments.site/reader031/viewer/2022030315/588261e71a28abd40e8b6e87/html5/thumbnails/15.jpg)
TEXT
DEBUGGING
▸ Your own network layer, turn on Relay transport logging in debug
▸ Web sockets
![Page 16: GraphQL With Relay Part Deux](https://reader031.vdocuments.site/reader031/viewer/2022030315/588261e71a28abd40e8b6e87/html5/thumbnails/16.jpg)
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”
![Page 17: GraphQL With Relay Part Deux](https://reader031.vdocuments.site/reader031/viewer/2022030315/588261e71a28abd40e8b6e87/html5/thumbnails/17.jpg)
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
![Page 18: GraphQL With Relay Part Deux](https://reader031.vdocuments.site/reader031/viewer/2022030315/588261e71a28abd40e8b6e87/html5/thumbnails/18.jpg)
TEXT
DATA LOADER - EXAMPLE
![Page 19: GraphQL With Relay Part Deux](https://reader031.vdocuments.site/reader031/viewer/2022030315/588261e71a28abd40e8b6e87/html5/thumbnails/19.jpg)
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
![Page 20: GraphQL With Relay Part Deux](https://reader031.vdocuments.site/reader031/viewer/2022030315/588261e71a28abd40e8b6e87/html5/thumbnails/20.jpg)
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.
![Page 21: GraphQL With Relay Part Deux](https://reader031.vdocuments.site/reader031/viewer/2022030315/588261e71a28abd40e8b6e87/html5/thumbnails/21.jpg)
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/
![Page 22: GraphQL With Relay Part Deux](https://reader031.vdocuments.site/reader031/viewer/2022030315/588261e71a28abd40e8b6e87/html5/thumbnails/22.jpg)
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
![Page 23: GraphQL With Relay Part Deux](https://reader031.vdocuments.site/reader031/viewer/2022030315/588261e71a28abd40e8b6e87/html5/thumbnails/23.jpg)
GRAPHQL & RELAY
RESOURCES
▸ Cartoon Guides To GraphQL & Relay: https://code-cartoons.com
▸ Awesome GraphQL - curated list on Github: https://github.com/chentsulin/awesome-graphql
![Page 24: GraphQL With Relay Part Deux](https://reader031.vdocuments.site/reader031/viewer/2022030315/588261e71a28abd40e8b6e87/html5/thumbnails/24.jpg)
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#/
![Page 25: GraphQL With Relay Part Deux](https://reader031.vdocuments.site/reader031/viewer/2022030315/588261e71a28abd40e8b6e87/html5/thumbnails/25.jpg)
QUESTIONS??? ▸ Twitter: @BradPillow, GitHub: pillowsoft
THANKS!