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
160
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
110
Other Decks in Technology
See All in Technology
今さら聞けない!? AWSの生成AIサービス Amazon Bedrock入門!
minorun365
PRO
11
2.7k
10分でわかるfreeeのQA
freee
0
260
あらゆる商品を扱う商品データベースを再設計した話 / product db re-architecture
rince
8
3.8k
オブジェクトのおしゃべり大失敗 メッセージングアンチパターン集 / messaging anti-pattern collection
ytake
0
340
プッシュ型子育てサービスを、先行プロジェクト実施自治体において開始します
govtechtokyo
0
290
複数の LLM モデルを扱う上で直面した辛みまとめ
kazuyaseki
1
250
社内共通ルールを値オブジェクトにして社内ライブラリとして運用してみた話
leveragestech
2
1.2k
AWS アーキテクチャクイズ
yuu26
2
700
生成AIの不確実性と向き合うためのオブジェクト指向設計
tkikuchi1002
2
700
実務への応用例から考える 変更に強いオブジェクト指向設計 / 20240324-ooc2024
bengo4com
7
5.5k
XRミーティング 2024-03-20
1ftseabass
PRO
0
100
MongoDB Atlas Vectorsearchではじめる生成AIアプリ開発
chie8842
3
510
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
RailsConf 2023
tenderlove
0
510
Ruby is Unlike a Banana
tanoku
95
10k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
225
51k
4 Signs Your Business is Dying
shpigford
174
21k
Web development in the modern age
philhawksworth
201
10k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
355
22k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
19
1.9k
Imperfection Machines: The Place of Print at Facebook
scottboms
257
12k
Debugging Ruby Performance
tmm1
68
11k
A Modern Web Designer's Workflow
chriscoyier
689
190k
For a Future-Friendly Web
brad_frost
170
8.9k
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