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
[ JAWS-UG 東京 CommunityBuilders Night #2 ]SlackとAmazon Q Developerで 運用効率化を模索する
sh_fk2
3
460
実践!カスタムインストラクション&スラッシュコマンド
puku0x
0
540
COVESA VSSによる車両データモデルの標準化とAWS IoT FleetWiseの活用
osawa
1
400
組織を巻き込む大規模プラットフォーム移行戦略 〜50+サービスのマルチリージョン・マルチプロダクト化で学んだステークホルダー協働の実践〜 / Platform migration strategy engaging all stakeholders
toshi0607
2
180
データ分析エージェント Socrates の育て方
na0
7
2.6k
Unlocking the Power of AI Agents with LINE Bot MCP Server
linedevth
0
120
はじめてのOSS開発からみえたGo言語の強み
shibukazu
3
990
なぜテストマネージャの視点が 必要なのか? 〜 一歩先へ進むために 〜
moritamasami
0
240
品質視点から考える組織デザイン/Organizational Design from Quality
mii3king
0
210
「全員プロダクトマネージャー」を実現する、Cursorによる仕様検討の自動運転
applism118
22
12k
これでもう迷わない!Jetpack Composeの書き方実践ガイド
zozotech
PRO
0
1.1k
EncryptedSharedPreferences が deprecated になっちゃった!どうしよう! / Oh no! EncryptedSharedPreferences has been deprecated! What should I do?
yanzm
0
490
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
The Power of CSS Pseudo Elements
geoffreycrofte
77
6k
Site-Speed That Sticks
csswizardry
10
820
Facilitating Awesome Meetings
lara
55
6.5k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
BBQ
matthewcrist
89
9.8k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
4 Signs Your Business is Dying
shpigford
184
22k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.8k
Git: the NoSQL Database
bkeepers
PRO
431
66k
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