Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
GraphQL with JavaScript
Radoslav Stankov
November 15, 2015
Programming
0
150
GraphQL with JavaScript
My GraphQL presentation from JSTalks
Radoslav Stankov
November 15, 2015
Tweet
Share
More Decks by Radoslav Stankov
See All by Radoslav Stankov
React Architecture at Product Hunt
rstankov
2
62
React Component Anti-Patterns
rstankov
0
400
How to an effective developer
rstankov
0
110
Domain Driven Design Kinda
rstankov
1
300
Testing React Hooks with Confidence
rstankov
1
120
Product Development
rstankov
2
100
Developing apps with React & Electron
rstankov
0
100
React Native Architecture at Product Hunt
rstankov
1
710
React Architecture at Product Hunt
rstankov
4
640
Other Decks in Programming
See All in Programming
個人開発でReact Native + Expo製アプリを作った話
ryonakae
1
440
Keeping your team in top shape with the Gradle Enterprise API
runningcode
3
120
Oracle REST Data Service: APEX Office Hours
thatjeffsmith
0
660
Java初心者が知っておくべきプログラミングのこと - JJUG CCC 2022 Spring
kishida
4
510
競プロのすすめ
uya116
0
650
Running Laravel/PHP on AWS (AWS Builders Day Taiwan 2022)
dwchiang
0
130
インターン生・新卒向け、学校でもっと教えてほしいITエンジニア基本スキル
nearme_tech
0
120
IE Graduation (IE の功績を讃える)
jxck
20
12k
Java アプリとAWS の良い関係 - AWS でJava アプリを実行する一番簡単な方法教えます / AWS for Javarista
kanamasa
2
1.2k
言語処理ライブラリ開発における失敗談 / NLPHacks
taishii
1
420
trocco® の品質を守る、とても普通な取り組み
kekekenta
0
350
Make the most of Django - PyCon Italia 2022
pauloxnet
0
110
Featured
See All Featured
Infographics Made Easy
chrislema
233
17k
Making the Leap to Tech Lead
cromwellryan
113
7.4k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
269
11k
Faster Mobile Websites
deanohume
294
28k
Automating Front-end Workflow
addyosmani
1351
200k
Principles of Awesome APIs and How to Build Them.
keavy
113
15k
What the flash - Photography Introduction
edds
61
10k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
39
13k
The Language of Interfaces
destraynor
148
20k
A better future with KSS
kneath
225
15k
Gamification - CAS2011
davidbonilla
75
3.9k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
12
920
Transcript
Implementing GraphQL with JavaScript Radoslav Stankov 21/10/2015
Radoslav Stankov @rstankov http://rstankov.com http://blog.rstankov.com http://github.com/rstankov
None
None
None
None
None
None
GET /api/posts?date=2015-10-31 { id: 1, title: "Post title", tagline: "Post
headline", votes_count: 1, comments_count: 1, url: '/category/slug', thumbnail_url: 'assets.producthunt.com/uuid', hunter_id: 1 }
None
None
GET /api/users/1 { id: 1, name: 'User Name', handle: 'user_name',
avatar_url: 'assets.producthunt.com/uuid' }
Rest Client Rest Server
Rest Client Rest Server /api/posts?date=2015-10-31
Rest Client Rest Server /api/posts?date=2015-10-31 /api/users/{x} (for X users)
Rest Client Rest Server /api/posts?date=2015-10-31 /api/users/{x} (for X users)
…approach 2
GET /api/posts?date=2015-10-31 { id: 1, title: "Post title", tagline: "Post
headline", votes_count: 1, comments_count: 1, url: '/category/slug', thumbnail_url: 'assets.producthunt.com/uuid', hunter: { id: 1, name: 'User Name', handle: 'user_name', avatar_url: 'assets.producthunt.com/uuid' } }
None
None
None
None
None
None
GET /api/posts?date=2015-10-31 { id: 1, title: "Post title", tagline: "Post
headline", votes_count: 1, comments_count: 1, url: '/category/slug', thumbnail_url: 'assets.producthunt.com/uuid', hunter: { id: 1, name: 'User Name', handle: 'user_name', avatar_url: 'assets.producthunt.com/uuid' }, makers: [{ id: 2, name: 'Second User', handle: 'second_user', avatar_url: 'assets.producthunt.com/uuid' }] }
None
None
None
GET /api/posts?date=2015-10-31 { id: 1, title: "Post title", tagline: "Post
headline", votes_count: 1, comments_count: 1, url: '/category/slug', thumbnail_url: 'assets.producthunt.com/uuid', hunter: { id: 1, name: 'User Name', handle: 'user_name', avatar_url: 'assets.producthunt.com/uuid' }, makers: [{ id: 2, name: 'Second User', handle: 'second_user', avatar_url: 'assets.producthunt.com/uuid' }], platform: [{ name: 'iPhone', }, { name: 'Mac', }, { name: 'Web', }] }
None
None
…approach 3
None
Rest Client Rest Server
Rest Client Rest Server endpoint 1 feature 1
Rest Client Rest Server endpoint 1 feature 1 endpoint 2
feature 2
Rest Client Rest Server endpoint 1 feature 1 endpoint 2
feature 2 endpoint 3 feature 3
Rest Client Rest Server endpoint 1 feature 1 endpoint 2
feature 2 endpoint 3 feature 3 endpoint N feature N
None
None
None
None
None
None
{ id: 1, title: "Post title", tagline: "Post headline", votes_count:
1, hunter: { id: 1, avatar_url: 'assets.producthunt.com/uuid' }, makers: [{ id: 2, avatar_url: 'assets.producthunt.com/uuid' }] }
{ id title tagline votes_count hunter { id avatar_url }
makers { id avatar_url } }
None
GET /graphql Request Body Response Body
query { post(id: 1){ id title tagline votes_count hunter
{ id avatar_url } makers { id avatar_url } } } GET /graphql Request Body Response Body
query { post(id: 1){ id title tagline votes_count hunter
{ id avatar_url } makers { id avatar_url } } } GET /graphql Request Body Response Body
query { post(id: 1){ id title tagline votes_count hunter
{ id avatar_url } makers { id avatar_url } } } GET /graphql Request Body Response Body { "data": { "post": { "id": 1, "title": "title", "tagline": "tagline", "votes_count": 0, "hunter": { "id": 1, "avatar_url": "assets.producthu }, "makers": [ { "id": 1, "avatar_url": "assets.product } ] } } }
It’s that simple
https://facebook.github.io/graphql
GraphQL is a query language created by Facebook in 2012
which provides a common interface between the client and the server for data fetching and manipulations. The client asks for various data from the GraphQL server via queries.
Architecture GraphQL Library (Per-Language) Type Definitions Application
Code
GraphQL • Single endpoint • Not just a library •
Application-Layer Protocol • Server agnostic • Strongly-typed • Client-specified queries • Hierarchical
Tries to solve • N+1 API queries • API response
bloat • Documentation • Ad Hoc Endpoints • Structure issues
Code var RootQueryType = new GraphQLObjectType({ name: 'RootQueryType', fields: {
post: { type: PostType, description: 'Find post by id', args: { id: { description: 'Post id' type: new GraphQLNonNull(GraphQLInt) } }, resolve: function(_, params) { return data.posts.find(params.id); } }, });
Code var PostType = new GraphQLObjectType({ name: 'Post', fields: function()
{ return { id: { type: GraphQLInt, }, title: { type: GraphQLString, }, user: { type: UserType, description: "Creator of the post", resolve: function(post) { return data.users.find(post.user_id); } }, }; } });
Code var [TYPE] = new GraphQLObjectType({ name: [NAME], description: [DESCRIPTION],
fields: function() { return { [FIELD_NAME]: { description: [DESCRIPTION], deprecation: [DEPRECATION MARKER], type: [TYPE], args: [LIST OF FIELD ARGUMENT], resolve: [FUNCTION] }, } } });
Code var PostType = new GraphQLObjectType({ name: 'Post', fields: function()
{ return { id: { type: GraphQLInt, resolve: function(post) { return post.id; } }, user: { type: UserType, resolve: function(post) { return data.users.find(post.user_id); } }, }; } });
Code var PostType = new GraphQLObjectType({ name: 'Post', fields: function()
{ return { id: { type: GraphQLInt }, user: { type: UserType, resolve: function(post) { return data.users.find(post.user_id); } }, }; } });
Query query { post(id: 1){ id title tagline votes_count
hunter { id avatar_url } makers { id avatar_url } } } { "data": { "post": { "id": 1, "title": "title", "tagline": "tagline", "votes_count": 0, "hunter": { "id": 1, "avatar_url": "assets.producthun }, "makers": [ { "id": 1, "avatar_url": "assets.producth } ] } } }
Mutation mutation { createUser(name: "Rado") { id } }
{ "data": { "createSpeaker": { "id": 2 } } }
Code var RootMutationType = new GraphQLObjectType({ name: 'RootMutationType', fields: {
createPost: { type: PostType, args: { title: { type: new GraphQLNonNull(GraphQLString) }, tagline: { type: new GraphQLNonNull(GraphQLString) }, user_id: { type: new GraphQLNonNull(GraphQLInt) }, }, resolve: function(_, params) { if (!data.users.find(params.user_id)) { throw "Invalid user id - " + params.user_id; } return data.posts.create(params); }, }, }, });
Documentation query { __schema { types { name fields
{ name type { name kind ofType { name kind } } } } } } { "data": { "__schema": { "types": [ { "name": "Query", "fields": [ { "name": "user", "type": { "name": "Non-Null", "kind": "NON_NULL", "ofType": { "name": "User", "kind": "OBJECT" } } }, { "name": "post", "type": { "name": "Non-Null", "kind": "NON_NULL", "ofType": { "name": "Post", "kind": "OBJECT" } } } ] },
{ id hunter: { id name small_avatar_url: avatar_url(size: 100) big_avatar_url:
avatar_url(size: 400) } } Cool tricks
Code var UserType = new GraphQLObjectType({ name: 'User', fields: function()
{ return { // ... some field definitions ... picture: { type: GraphQLString, args: { size: { type: GraphQLInt }, }, resolve: function(user, params) { var size = params.size || 400; return 'file.example.com/' + user.picture_uuid + "?size=" + size; } }, }; } });
query withFragments { user(id: 4) { friends(first: 10) { ...friendFields
} mutualFriends(first: 10) { ...friendFields } } } fragment friendFields on User { id name profilePic(size: 50) } Cool tricks
https://facebook.github.io/react
https://facebook.github.io/relay
None
PostContainer = Relay.createContainer(Post, { fragments: { post: () => Relay.QL`
fragment on Post { id title tagline votes_count } `, }, }); Relay
Demo
Issues • New, just a draft specification • Mutations are
weird • Best practices and solutions • Large datasets
None
https://speakerdeck.com/rstankov/introduction-to-graphql
https://github.com/rstankov/talks-code
None
None
@rstankov Thanks :)
Questions?