graph ql - callistaenterprise.se · •multiple round trips for complicated object graphs •...
TRANSCRIPT
![Page 1: GRAPH QL - callistaenterprise.se · •Multiple round trips for complicated object graphs • Client Transformations • Too many ad hoc endpoints • Documentation or specifications](https://reader034.vdocuments.mx/reader034/viewer/2022042300/5eca7d48c8fbae772458d5db/html5/thumbnails/1.jpg)
| CALLISTAENTERPRISE.SE
GRAPH QL
STEPHEN.WHITE
![Page 2: GRAPH QL - callistaenterprise.se · •Multiple round trips for complicated object graphs • Client Transformations • Too many ad hoc endpoints • Documentation or specifications](https://reader034.vdocuments.mx/reader034/viewer/2022042300/5eca7d48c8fbae772458d5db/html5/thumbnails/2.jpg)
2
GRAPH-QL
![Page 3: GRAPH QL - callistaenterprise.se · •Multiple round trips for complicated object graphs • Client Transformations • Too many ad hoc endpoints • Documentation or specifications](https://reader034.vdocuments.mx/reader034/viewer/2022042300/5eca7d48c8fbae772458d5db/html5/thumbnails/3.jpg)
• My Interest • What is Graph QL • Demo • Why GraphQL • Summary
3
AGENDA
![Page 4: GRAPH QL - callistaenterprise.se · •Multiple round trips for complicated object graphs • Client Transformations • Too many ad hoc endpoints • Documentation or specifications](https://reader034.vdocuments.mx/reader034/viewer/2022042300/5eca7d48c8fbae772458d5db/html5/thumbnails/4.jpg)
4
REACT EU CONF
![Page 5: GRAPH QL - callistaenterprise.se · •Multiple round trips for complicated object graphs • Client Transformations • Too many ad hoc endpoints • Documentation or specifications](https://reader034.vdocuments.mx/reader034/viewer/2022042300/5eca7d48c8fbae772458d5db/html5/thumbnails/5.jpg)
5
POINTS TO REMEMBER
Developer Experience
DX
![Page 6: GRAPH QL - callistaenterprise.se · •Multiple round trips for complicated object graphs • Client Transformations • Too many ad hoc endpoints • Documentation or specifications](https://reader034.vdocuments.mx/reader034/viewer/2022042300/5eca7d48c8fbae772458d5db/html5/thumbnails/6.jpg)
6
POINTS TO REMEMBER
Reason
about your code
![Page 7: GRAPH QL - callistaenterprise.se · •Multiple round trips for complicated object graphs • Client Transformations • Too many ad hoc endpoints • Documentation or specifications](https://reader034.vdocuments.mx/reader034/viewer/2022042300/5eca7d48c8fbae772458d5db/html5/thumbnails/7.jpg)
7
MEETUP QUOTE
React just vanishes into your code
![Page 8: GRAPH QL - callistaenterprise.se · •Multiple round trips for complicated object graphs • Client Transformations • Too many ad hoc endpoints • Documentation or specifications](https://reader034.vdocuments.mx/reader034/viewer/2022042300/5eca7d48c8fbae772458d5db/html5/thumbnails/8.jpg)
8
MEETUPS - GÖTEBORG REACTJS
http://www.meetup.com/ReactJS-Goteborg/
![Page 9: GRAPH QL - callistaenterprise.se · •Multiple round trips for complicated object graphs • Client Transformations • Too many ad hoc endpoints • Documentation or specifications](https://reader034.vdocuments.mx/reader034/viewer/2022042300/5eca7d48c8fbae772458d5db/html5/thumbnails/9.jpg)
9
MEETUPS - LONDON REACTJS
http://www.meetup.com/London-React-User-Group/
![Page 10: GRAPH QL - callistaenterprise.se · •Multiple round trips for complicated object graphs • Client Transformations • Too many ad hoc endpoints • Documentation or specifications](https://reader034.vdocuments.mx/reader034/viewer/2022042300/5eca7d48c8fbae772458d5db/html5/thumbnails/10.jpg)
10
AND SERIOUSLY!
260 BILLION!Requests a day!
![Page 11: GRAPH QL - callistaenterprise.se · •Multiple round trips for complicated object graphs • Client Transformations • Too many ad hoc endpoints • Documentation or specifications](https://reader034.vdocuments.mx/reader034/viewer/2022042300/5eca7d48c8fbae772458d5db/html5/thumbnails/11.jpg)
11
WHAT
What is it?
![Page 12: GRAPH QL - callistaenterprise.se · •Multiple round trips for complicated object graphs • Client Transformations • Too many ad hoc endpoints • Documentation or specifications](https://reader034.vdocuments.mx/reader034/viewer/2022042300/5eca7d48c8fbae772458d5db/html5/thumbnails/12.jpg)
12
WHAT
It’s a graph query language that presents the Possibilities of your API
![Page 13: GRAPH QL - callistaenterprise.se · •Multiple round trips for complicated object graphs • Client Transformations • Too many ad hoc endpoints • Documentation or specifications](https://reader034.vdocuments.mx/reader034/viewer/2022042300/5eca7d48c8fbae772458d5db/html5/thumbnails/13.jpg)
13
WHAT
It’s not a Data Store or SQL But acts as A Server side Translation between your client and your Data Store
![Page 14: GRAPH QL - callistaenterprise.se · •Multiple round trips for complicated object graphs • Client Transformations • Too many ad hoc endpoints • Documentation or specifications](https://reader034.vdocuments.mx/reader034/viewer/2022042300/5eca7d48c8fbae772458d5db/html5/thumbnails/14.jpg)
14
TOO MANY ADAPTERS!
Server
RESTfull API
IOS
Adapter
Android
Adapter
Web/JS
Adapter
![Page 15: GRAPH QL - callistaenterprise.se · •Multiple round trips for complicated object graphs • Client Transformations • Too many ad hoc endpoints • Documentation or specifications](https://reader034.vdocuments.mx/reader034/viewer/2022042300/5eca7d48c8fbae772458d5db/html5/thumbnails/15.jpg)
15
ONE ADAPTER TO RULE THEM ALL!
Client Server Data Sources
Rest API
GraphQL Schema
Data Store
Mediates/Adapts/AggregatesThe client decides the format of it’s data via it’s queries
this data graph please
here’s your data graph
![Page 16: GRAPH QL - callistaenterprise.se · •Multiple round trips for complicated object graphs • Client Transformations • Too many ad hoc endpoints • Documentation or specifications](https://reader034.vdocuments.mx/reader034/viewer/2022042300/5eca7d48c8fbae772458d5db/html5/thumbnails/16.jpg)
• Hierarchy • A Product-centric approach ( client ) • Client-specified queries • Backwards Compatibility • Structured Code, in the form of Composition • Application-Layer Protocol • Types • A Method of Introspective
16
WHAT - IT PRESENTS YOU WITH
![Page 17: GRAPH QL - callistaenterprise.se · •Multiple round trips for complicated object graphs • Client Transformations • Too many ad hoc endpoints • Documentation or specifications](https://reader034.vdocuments.mx/reader034/viewer/2022042300/5eca7d48c8fbae772458d5db/html5/thumbnails/17.jpg)
17
CORE PRINCIPLES
• Compossible • Mental Model • Graph Data • Types • Version Agnostic
![Page 18: GRAPH QL - callistaenterprise.se · •Multiple round trips for complicated object graphs • Client Transformations • Too many ad hoc endpoints • Documentation or specifications](https://reader034.vdocuments.mx/reader034/viewer/2022042300/5eca7d48c8fbae772458d5db/html5/thumbnails/18.jpg)
18
CORE PRINCIPLES
Its Compossible
![Page 19: GRAPH QL - callistaenterprise.se · •Multiple round trips for complicated object graphs • Client Transformations • Too many ad hoc endpoints • Documentation or specifications](https://reader034.vdocuments.mx/reader034/viewer/2022042300/5eca7d48c8fbae772458d5db/html5/thumbnails/19.jpg)
19
CORE PRINCIPLES
Posts
query{ posts{ _id, title } }
returns : posts : [{ _id,title}]
Post query{ posts(_id:1){ _id, title, body } }
Comments query{ comments(postfk:1){ _id, commentText: body } }
"posts": [ { "_id": 1, "title": "ReactJS", "body": "redux, immutablejs" } ]
"comments": [ {
"_id": 1, "commentText": “Redux?" },
. . . ]
![Page 20: GRAPH QL - callistaenterprise.se · •Multiple round trips for complicated object graphs • Client Transformations • Too many ad hoc endpoints • Documentation or specifications](https://reader034.vdocuments.mx/reader034/viewer/2022042300/5eca7d48c8fbae772458d5db/html5/thumbnails/20.jpg)
20
CORE PRINCIPLES
Types
![Page 21: GRAPH QL - callistaenterprise.se · •Multiple round trips for complicated object graphs • Client Transformations • Too many ad hoc endpoints • Documentation or specifications](https://reader034.vdocuments.mx/reader034/viewer/2022042300/5eca7d48c8fbae772458d5db/html5/thumbnails/21.jpg)
21
CORE PRINCIPLES
Mental Model
![Page 22: GRAPH QL - callistaenterprise.se · •Multiple round trips for complicated object graphs • Client Transformations • Too many ad hoc endpoints • Documentation or specifications](https://reader034.vdocuments.mx/reader034/viewer/2022042300/5eca7d48c8fbae772458d5db/html5/thumbnails/22.jpg)
22
CORE PRINCIPLES
Graph of Data
![Page 23: GRAPH QL - callistaenterprise.se · •Multiple round trips for complicated object graphs • Client Transformations • Too many ad hoc endpoints • Documentation or specifications](https://reader034.vdocuments.mx/reader034/viewer/2022042300/5eca7d48c8fbae772458d5db/html5/thumbnails/23.jpg)
23
CORE PRINCIPLES
Version Agnostic
![Page 24: GRAPH QL - callistaenterprise.se · •Multiple round trips for complicated object graphs • Client Transformations • Too many ad hoc endpoints • Documentation or specifications](https://reader034.vdocuments.mx/reader034/viewer/2022042300/5eca7d48c8fbae772458d5db/html5/thumbnails/24.jpg)
24
REST API
App Server Client
Models v1 Views v1
/v2/model/34.plz
Your model
Models v2 Views v2
![Page 25: GRAPH QL - callistaenterprise.se · •Multiple round trips for complicated object graphs • Client Transformations • Too many ad hoc endpoints • Documentation or specifications](https://reader034.vdocuments.mx/reader034/viewer/2022042300/5eca7d48c8fbae772458d5db/html5/thumbnails/25.jpg)
25
GRAPH-QL
App Server Client
Requirements
Possibilities
![Page 26: GRAPH QL - callistaenterprise.se · •Multiple round trips for complicated object graphs • Client Transformations • Too many ad hoc endpoints • Documentation or specifications](https://reader034.vdocuments.mx/reader034/viewer/2022042300/5eca7d48c8fbae772458d5db/html5/thumbnails/26.jpg)
26
GRAPH-QL
App Server Client
Models v1
Views v1
this data shape please!
Heres your specific data
Models v2
Views v2
![Page 27: GRAPH QL - callistaenterprise.se · •Multiple round trips for complicated object graphs • Client Transformations • Too many ad hoc endpoints • Documentation or specifications](https://reader034.vdocuments.mx/reader034/viewer/2022042300/5eca7d48c8fbae772458d5db/html5/thumbnails/27.jpg)
27
DEMO
Technical Setup
![Page 28: GRAPH QL - callistaenterprise.se · •Multiple round trips for complicated object graphs • Client Transformations • Too many ad hoc endpoints • Documentation or specifications](https://reader034.vdocuments.mx/reader034/viewer/2022042300/5eca7d48c8fbae772458d5db/html5/thumbnails/28.jpg)
28
MODEL
User *
*
*
1
1
1
Comments
Post
![Page 29: GRAPH QL - callistaenterprise.se · •Multiple round trips for complicated object graphs • Client Transformations • Too many ad hoc endpoints • Documentation or specifications](https://reader034.vdocuments.mx/reader034/viewer/2022042300/5eca7d48c8fbae772458d5db/html5/thumbnails/29.jpg)
ServerNode
NODE JS IMPLEMENTATION
React Client Query
Postgres DB
Defines the possibilities of your API maybe similar to an Interface
Adapter
Express
GraphQL Schema
![Page 30: GRAPH QL - callistaenterprise.se · •Multiple round trips for complicated object graphs • Client Transformations • Too many ad hoc endpoints • Documentation or specifications](https://reader034.vdocuments.mx/reader034/viewer/2022042300/5eca7d48c8fbae772458d5db/html5/thumbnails/30.jpg)
React Client
30
CLIENT CODE
// general query function, using fetch and returning a promise export function query(query) { return fetch(gqlserver, { method: 'post', headers: { 'Content-Type':'application/graphql' }, body: query, }).then((result, error)=>{ return result.json(); })} // defined query export function getPost(id) { let postsQuery = `{posts(_id:${id}){_id,title,body}}`; return query(postsQuery);} // mutation to update a post export function updatePost(post) { let jsPost = post.toJS(); let addCommentQuery = `mutation { updatePost(_id:${jsPost._id},body:"${jsPost.body}"){_id,title,body,userfk}}`; return query(addCommentQuery);}
![Page 31: GRAPH QL - callistaenterprise.se · •Multiple round trips for complicated object graphs • Client Transformations • Too many ad hoc endpoints • Documentation or specifications](https://reader034.vdocuments.mx/reader034/viewer/2022042300/5eca7d48c8fbae772458d5db/html5/thumbnails/31.jpg)
31
GRAPHQL-SCHEMA
GraphQL Schema// Types const User = new GraphQLObjectType({}) const Post = new GraphQLObjectType({}) const Comment = new GraphQLObjectType({})
// Queries const Query = new GraphQLObjectType({
// Mutations const Mutation = new GraphQLObjectType({
// Schema const Schema = new GraphQLSchema({ description:’my scheam', query: Query, mutation: Mutation});
![Page 32: GRAPH QL - callistaenterprise.se · •Multiple round trips for complicated object graphs • Client Transformations • Too many ad hoc endpoints • Documentation or specifications](https://reader034.vdocuments.mx/reader034/viewer/2022042300/5eca7d48c8fbae772458d5db/html5/thumbnails/32.jpg)
32
GRAPHQL-ADAPTER
Adapter
return { findById:function(name, id, res){…}, find: function(name, query, res){…}, put: function(name, res, req){…}, delete: function(name, id, res){…} }
![Page 33: GRAPH QL - callistaenterprise.se · •Multiple round trips for complicated object graphs • Client Transformations • Too many ad hoc endpoints • Documentation or specifications](https://reader034.vdocuments.mx/reader034/viewer/2022042300/5eca7d48c8fbae772458d5db/html5/thumbnails/33.jpg)
33
DEMO
Code And Demo
https://react-blogg-server.herokuapp.com/gql
https://react-blogg-client.herokuapp.com/
https://github.com/maitriyogin/react-blogg-server
https://github.com/maitriyogin/react-blogg-client
![Page 34: GRAPH QL - callistaenterprise.se · •Multiple round trips for complicated object graphs • Client Transformations • Too many ad hoc endpoints • Documentation or specifications](https://reader034.vdocuments.mx/reader034/viewer/2022042300/5eca7d48c8fbae772458d5db/html5/thumbnails/34.jpg)
34
HISTORY
Brief history
It started with a news feed
![Page 35: GRAPH QL - callistaenterprise.se · •Multiple round trips for complicated object graphs • Client Transformations • Too many ad hoc endpoints • Documentation or specifications](https://reader034.vdocuments.mx/reader034/viewer/2022042300/5eca7d48c8fbae772458d5db/html5/thumbnails/35.jpg)
35
MOVE TO MOBILE
HTML5
Facebooks move to Mobile 2011
Native Client
![Page 36: GRAPH QL - callistaenterprise.se · •Multiple round trips for complicated object graphs • Client Transformations • Too many ad hoc endpoints • Documentation or specifications](https://reader034.vdocuments.mx/reader034/viewer/2022042300/5eca7d48c8fbae772458d5db/html5/thumbnails/36.jpg)
36
ORIGINAL STACK
HTML
Web Browser
Application Server
Data Services
![Page 37: GRAPH QL - callistaenterprise.se · •Multiple round trips for complicated object graphs • Client Transformations • Too many ad hoc endpoints • Documentation or specifications](https://reader034.vdocuments.mx/reader034/viewer/2022042300/5eca7d48c8fbae772458d5db/html5/thumbnails/37.jpg)
37
NATIVE SHELL AROUND A WEB VIEW
HTML
Native App
Application Server
Data Services
Web Browser
Business Logic
![Page 38: GRAPH QL - callistaenterprise.se · •Multiple round trips for complicated object graphs • Client Transformations • Too many ad hoc endpoints • Documentation or specifications](https://reader034.vdocuments.mx/reader034/viewer/2022042300/5eca7d48c8fbae772458d5db/html5/thumbnails/38.jpg)
38
NATIVE CLIENT WITH REST
REST/JSON
Native App
Application Server
Data Services
Components/ModelsBusiness Logic
![Page 39: GRAPH QL - callistaenterprise.se · •Multiple round trips for complicated object graphs • Client Transformations • Too many ad hoc endpoints • Documentation or specifications](https://reader034.vdocuments.mx/reader034/viewer/2022042300/5eca7d48c8fbae772458d5db/html5/thumbnails/39.jpg)
39
MOVED TO REST
RESTful API
![Page 40: GRAPH QL - callistaenterprise.se · •Multiple round trips for complicated object graphs • Client Transformations • Too many ad hoc endpoints • Documentation or specifications](https://reader034.vdocuments.mx/reader034/viewer/2022042300/5eca7d48c8fbae772458d5db/html5/thumbnails/40.jpg)
40
PROBLEMS THEY ENCOUNTERED WITH REST
Coupling : Tight Cohesion: Low
![Page 41: GRAPH QL - callistaenterprise.se · •Multiple round trips for complicated object graphs • Client Transformations • Too many ad hoc endpoints • Documentation or specifications](https://reader034.vdocuments.mx/reader034/viewer/2022042300/5eca7d48c8fbae772458d5db/html5/thumbnails/41.jpg)
• Multiple round trips for complicated object graphs • Client Transformations • Too many ad hoc endpoints • Documentation or specifications invariably become
outdated. • REST is intended for long-lived network-based
applications that span multiple organisations… • Not really suited for an API that serves a client app
built by the same organisation.
41
MAIN ISSUES WITH REST, DRIVERS TO GRAPHQL
![Page 42: GRAPH QL - callistaenterprise.se · •Multiple round trips for complicated object graphs • Client Transformations • Too many ad hoc endpoints • Documentation or specifications](https://reader034.vdocuments.mx/reader034/viewer/2022042300/5eca7d48c8fbae772458d5db/html5/thumbnails/42.jpg)
42
GRAPH-QL
![Page 43: GRAPH QL - callistaenterprise.se · •Multiple round trips for complicated object graphs • Client Transformations • Too many ad hoc endpoints • Documentation or specifications](https://reader034.vdocuments.mx/reader034/viewer/2022042300/5eca7d48c8fbae772458d5db/html5/thumbnails/43.jpg)
43
CLIENT FIRST
Client first!Product CentricGraph of DataClient decides the shapeOnly get what you need
![Page 44: GRAPH QL - callistaenterprise.se · •Multiple round trips for complicated object graphs • Client Transformations • Too many ad hoc endpoints • Documentation or specifications](https://reader034.vdocuments.mx/reader034/viewer/2022042300/5eca7d48c8fbae772458d5db/html5/thumbnails/44.jpg)
44
GRAPHQL ARCH
JSON Data Graph
Native App
Application Server
Data Services
Components/ModelsBusiness Logic
GraphQL Schema
![Page 45: GRAPH QL - callistaenterprise.se · •Multiple round trips for complicated object graphs • Client Transformations • Too many ad hoc endpoints • Documentation or specifications](https://reader034.vdocuments.mx/reader034/viewer/2022042300/5eca7d48c8fbae772458d5db/html5/thumbnails/45.jpg)
• Composition : The component decides! • The api/queries are decided by the client needs • One endpoint • Version agnosticism • No need for multiple client transformation • GraphIQL - self documenting api - very cool! • Relay… next time
45
SUMMARY
![Page 46: GRAPH QL - callistaenterprise.se · •Multiple round trips for complicated object graphs • Client Transformations • Too many ad hoc endpoints • Documentation or specifications](https://reader034.vdocuments.mx/reader034/viewer/2022042300/5eca7d48c8fbae772458d5db/html5/thumbnails/46.jpg)
46
REST API
https://react-blogg-server.herokuapp.com/api/posts
https://react-blogg-server.herokuapp.com/api/users
https://react-blogg-server.herokuapp.com/api/comments