Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
GraphQL with JavaScript
Search
Radoslav Stankov
November 15, 2015
Programming
0
290
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
Rails: The Missing Parts
rstankov
1
110
The dream that turned into nightmare
rstankov
0
210
The dream that turned into nightmare (lightning)
rstankov
0
53
Ruby on Rails - The Single Engineer Framework
rstankov
0
260
Living Without Exceptions
rstankov
1
220
One engineer company with Ruby on Rails
rstankov
2
670
Eliminating noise from your code
rstankov
0
110
Best JavaScript is No Javascript
rstankov
0
140
React Mid Game
rstankov
2
130
Other Decks in Programming
See All in Programming
dbt Pythonモデルで実現するSnowflake活用術
trsnium
0
150
責務と認知負荷を整える! 抽象レベルを意識した関心の分離
yahiru
2
410
Multi Step Form, Decentralized Autonomous Organization
pumpkiinbell
1
740
Rubyで始める関数型ドメインモデリング
shogo_tksk
0
110
苦しいTiDBへの移行を乗り越えて快適な運用を目指す
leveragestech
0
580
技術を根付かせる / How to make technology take root
kubode
1
250
ファインディの テックブログ爆誕までの軌跡
starfish719
2
1.1k
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
170
バックエンドのためのアプリ内課金入門 (サブスク編)
qnighy
8
1.8k
Writing documentation can be fun with plugin system
okuramasafumi
0
120
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
130
Bedrock Agentsレスポンス解析によるAgentのOps
licux
3
840
Featured
See All Featured
Speed Design
sergeychernyshev
27
790
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
For a Future-Friendly Web
brad_frost
176
9.5k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
9
440
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
How GitHub (no longer) Works
holman
314
140k
Raft: Consensus for Rubyists
vanstee
137
6.8k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.3k
A designer walks into a library…
pauljervisheath
205
24k
Mobile First: as difficult as doing things right
swwweet
223
9.3k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
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?