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
PractiQL GraphQL
Search
Alexander Savin
December 03, 2015
Technology
0
170
PractiQL GraphQL
Talk performed at AsyncJS meetup in Brighton on 3.12.2015
Alexander Savin
December 03, 2015
Tweet
Share
More Decks by Alexander Savin
See All by Alexander Savin
Practical GraphQL with speaker notes
asavin
0
120
Other Decks in Technology
See All in Technology
初めてAWSを使うときのセキュリティ覚書〜初心者支部編〜
cmusudakeisuke
1
280
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
10
75k
【NoMapsTECH 2025】AI Edge Computing Workshop
akit37
0
230
品質視点から考える組織デザイン/Organizational Design from Quality
mii3king
0
210
バイブスに「型」を!Kent Beckに学ぶ、AI時代のテスト駆動開発
amixedcolor
3
590
「全員プロダクトマネージャー」を実現する、Cursorによる仕様検討の自動運転
applism118
22
12k
なぜテストマネージャの視点が 必要なのか? 〜 一歩先へ進むために 〜
moritamasami
0
240
RSCの時代にReactとフレームワークの境界を探る
uhyo
11
3.5k
エンジニアが主導できる組織づくり ー 製品と事業を進化させる体制へのシフト
ueokande
1
110
プラットフォーム転換期におけるGitHub Copilot活用〜Coding agentがそれを加速するか〜 / Leveraging GitHub Copilot During Platform Transition Periods
aeonpeople
1
240
AIエージェント開発用SDKとローカルLLMをLINE Botと組み合わせてみた / LINEを使ったLT大会 #14
you
PRO
0
130
Create Ruby native extension gem with Go
sue445
0
130
Featured
See All Featured
Become a Pro
speakerdeck
PRO
29
5.5k
Being A Developer After 40
akosma
90
590k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Embracing the Ebb and Flow
colly
87
4.8k
GitHub's CSS Performance
jonrohan
1032
460k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Building Applications with DynamoDB
mza
96
6.6k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Thoughts on Productivity
jonyablonski
70
4.8k
How to Ace a Technical Interview
jacobian
279
23k
How GitHub (no longer) Works
holman
315
140k
Transcript
PRACTIQL GRAPHQL
ABOUT ME Alexander Savin Web developer @ Red Badger
Skydiver
REACT LONDON MEETUP > 2000 members
None
GRAPHQL
REAL LIFE STORY
FRONT END APP SERVICE A SERVICE C SERVICE B SERVICE
D
FACEBOOK CASE
GRAPHQL
GRAPHQL SERVER
GRAPHQL SERVER GRAPHQL CLIENT
CLIENT 1.CREATES GRAPHQL QUERY STRING 2.SENDS IT TO THE SERVER
SERVER 1.PROCESSES GRAPHQL QUERY STRING 2.SENDS JSON RESPONSE
LANGUAGE FOR READ / WRITE ACTIONS
QUERIES
{ user { name } }
{ user { name } } { “user”: { “name”:
“Alex Savin” } } GraphQL JSON
MUTATIONS
mutation AddUser { createUser(input: {first_name: "Alex" }) { } }
mutation AddUser { createUser(input: {first_name: "Alex" }) { changedUser {
first_name } } }
QUERY ARGUMENTS
{ user { name } }
{ user(id: 123456) { name } }
NESTING
{ user(id: 123456) { name friends { name } }
}
{ user(id: 123456) { name friends { name friends {
name friends {…} } } } }
COMPOSITION
{ user(id: 123456) { first_name last_name email twitter town homepage
} }
{ user(id: 123456) { …UserDetails } } fragment UserDetails on
User { first_name last_name email twitter town homepage }
TYPE SYSTEM (SERVER)
type User { name: String id: String! }
type User { name: String id: String! } TYPE ROOT
QUERY type Query { user(id: String!): User }
THAT’S ALL YOU NEED (time for live demo)
None
INTROSPECTION
{ __schema { types { fields { name description }
} } }
FEW IMPORTANT TAKEOUTS
DATA SHAPE EQUALITY What you request is what you get
WYRIWYG
NO OVERFETCHING
SINGLE REQUEST / RESPONSE FOR A CLIENT
BACK TO REST
{ "created_at": "2015-08-30T00:50:25.000+00:00", "genres": [], "id": "e66637db-13f9-4056-abef-f731f8b1a3c7", "like_count": 3, "liked_count":
3, "name": "Excuse me while I kiss these frets", "owner": { "avatar_url": "https://secure.gravatar.com/avatar/ 4ede0ad35bb796ea8f78861acc4372ca?s=300", "bio": null, "id": "b06e671a-b169-45e6-a645-74c31abca910", "login": "playlistrock",
{ "created_at": "2015-08-30T00:50:25.000+00:00", "genres": [], "id": "e66637db-13f9-4056-abef-f731f8b1a3c7", "like_count": 3, "liked_count":
3, "name": "Excuse me while I kiss these frets", "owner": { "avatar_url": "https://secure.gravatar.com/avatar/4ede0ad35bb796ea8f78861acc4372ca?s=300", "bio": null, "id": "b06e671a-b169-45e6-a645-74c31abca910", "login": "playlistrock", "name": "Playlist Rock", "site_admin": false }, "published": false, "saved_count": 3, "tags": [ { "name": "Jimi Hendrix" }, { "name": "Jimmy Page" }, { "name": "Eric Clapton" }, … https://blog.jacobwgillespie.com/from-rest-to-graphql-b4e95e94c26b
GRAPHQL IS A SPEC http://facebook.github.io/graphql/
EXPRESS GRAPHQL DEMO
RESOLVE {}
ASYNC RESOLVE {}
async resolve(obj, {...}) { const endpoints = [ { endpoint:
'voiceNumber', data: contactNumber }, { endpoint: 'smsNumber', data: contactNumber }, { endpoint: 'email', data: email }, ]; const processEndpoint = async ({endpoint, data}) => { try { return await contactService[endpoint](data); } catch (error) { return error; } }; const processes = [
const processes = [ for (process of endpoints) processEndpoint(process) ];
const responses = await* processes; const errors = responses.filter(response => response instanceof Error); if (errors.length) { throw errors; } return { accessToken, refreshToken, };
RELAY
None
REUSABLE SELF-CONTAINED COMPONENTS
myComponent\ index.js style.css test.js data?
OPTIMISTIC UPDATES ERROR HANDLING OPTIMAL DATA FETCHING
COMPONENTS DECLARE WHAT DATA THEY NEED
None
Relay with React Native Allows code re-usability across iOS and
Android 87% in case of this app
GRAPHQL
GRAPHQL RELAY REACT FLUX
BACK TO OUR STORY
FRONT END APP SERVICE A SERVICE C SERVICE B SERVICE
D
FRONT END APP SERVICE A SERVICE C SERVICE B SERVICE
D GRAPHQL SERVER
FRONT END APP SERVICE A SERVICE C SERVICE B SERVICE
D GRAPHQL SERVER IOS ANDROID
FRONT END APP SERVICE A SERVICE C SERVICE B SERVICE
D GRAPHQL SERVER IOS ANDROID FRONT END APP V2 IOS V2 ANDROID V2
FRONT END APP GRAPHQL SERVER IOS ANDROID FRONT END APP
V2 IOS V2 ANDROID V2
THANKS
Alexander Savin @karismafilms Red Badger @redbadgerteam
REFERENCES • http://red-badger.com/blog/2015/08/28/give-it-5-days-facebook-relay-and-graphql/ • http://red-badger.com/blog/2015/07/09/graphql-and-the-open-movie-database-from- introspection-to-inception/ • https://blog.jacobwgillespie.com/from-rest-to-graphql-b4e95e94c26b • https://www.youtube.com/watch?v=Ed6oJXKt3-M
- Nick Schrock on GraphQL • http://graphql.org/ • https://www.reindex.io/ • http://radiobadger.com/posts/2015-11-05-episode-26.html