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
Introduction to GraphQL (Reactathon)
Search
jnwng
March 20, 2018
Technology
0
160
Introduction to GraphQL (Reactathon)
Talk given at Reactathon 2018 3/20/2018
jnwng
March 20, 2018
Tweet
Share
More Decks by jnwng
See All by jnwng
Evolving the Graph
jnwng
1
270
An Introduction to GraphQL (ReactJS SF Bay Area)
jnwng
0
120
Providing Flexibility Through Constraint
jnwng
0
76
Introduction to GraphQL
jnwng
1
530
Going GraphQL First - ReactSF
jnwng
0
190
Going GraphQL First
jnwng
5
710
keeping up with javascript
jnwng
3
1k
Presentations 101
jnwng
1
230
SViOS Meetup: HTTP Live Streaming
jnwng
2
400
Other Decks in Technology
See All in Technology
プロポーザルのコツ ~ Kaigi on Rails 2025 初参加で3名の登壇を実現 ~
naro143
1
160
ZOZOのAI活用実践〜社内基盤からサービス応用まで〜
zozotech
PRO
0
220
動画データのポテンシャルを引き出す! Databricks と AI活用への奮闘記(現在進行形)
databricksjapan
0
160
大規模サーバーレスAPIの堅牢性・信頼性設計 〜AWSのベストプラクティスから始まる現実的制約との向き合い方〜
maimyyym
4
2.6k
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
ACA でMAGI システムを社内で展開しようとした話
mappie_kochi
1
300
Goに育てられ開発者向けセキュリティ事業を立ち上げた僕が今向き合う、AI × セキュリティの最前線 / Go Conference 2025
flatt_security
0
360
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
oracle4engineer
PRO
3
5.5k
小学4年生夏休みの自由研究「ぼくと Copilot エージェント」
taichinakamura
0
530
Shirankedo NOCで見えてきたeduroam/OpenRoaming運用ノウハウと課題 - BAKUCHIKU BANBAN #2
marokiki
0
170
スタートアップにおけるこれからの「データ整備」
shomaekawa
2
310
オープンソースでどこまでできる?フォーマル検証チャレンジ
msyksphinz
0
120
Featured
See All Featured
A designer walks into a library…
pauljervisheath
209
24k
GitHub's CSS Performance
jonrohan
1032
460k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
A Tale of Four Properties
chriscoyier
160
23k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
51k
Building an army of robots
kneath
306
46k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Music & Morning Musume
bryan
46
6.8k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Navigating Team Friction
lara
189
15k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Transcript
An Introduction To GraphQL Reactathon, March 20, 2018
Jon Wong Frontend Infrastructure, Coursera @jnwng 2
Runtime ▪ Clients ▪ Servers ▪ Tools What We’re Covering
in GraphQL Language ▪ Schemas ▪ Queries 3
What is GraphQL? Taken straight from GraphQL.org
Describe your Data type Project { name: String tagline: String
contributors: [User] } 5
Ask for What You Want query { project(name: "GraphQL") {
tagline } } 6
Get Predictable Results query { project(name: "GraphQL") { tagline }
} 7 { "project": { "tagline": "A query language for APIs" } }
Schemas Describing possible data
Describe everything that is possible ▪ All possible data results
are described by the server. 9
Validation ▪ Every query is validated against the GraphQL schema
▪ No runtime errors for query documents 10
The GraphQL Schema gives us the basis of everything that
is possible when communicating to the server from the client. 11
Queries Reading your data
13 A simple query query { project(name: "GraphQL") { tagline
} } { "project": { "tagline": "A query language for APIs" } }
14 A simple query query { project(name: "GraphQL") { tagline
author } } { "project": { "tagline": "A query language for APIs", “author”: “jnwng” } }
Fragments fragment MyFancyFragment on MyResource { someField } 15 These
are required!
Spreading a fragment in a query query { someResource {
...MyFancyFragment } } 16 These two types should match
17 A typical React application
18 … broken down into components ...
19 A complex query
20 A complex query
21 A complex query query CoursePage { course(slug: “Machine Learning”)
{ title description ...University ...Instructor } }
22 ▪ Components can be more portable ▪ Components are
more self-sufficient. Every component can declare its own data requirements
GraphQL queries allow the client to declare exactly what it
needs, in the form that it needs it in. 23
Clients Managing your data
Clients make it easier to manage data Relay Apollo 25
Caching ▪ Clients provide advanced caching for GraphQL queries. 26
Caching query ListView { allBooks { id name } }
27 query DetailView ($id: ID) { bookById(id: $id) { name } }
Clients make adopting GraphQL in your application a breeze. 28
Servers Serving your data
Mapping types to resolvers 30 const schemaDefinition = ` type
Query { books: [Book] } type Book { title: String author: String } `; const resolvers = { Query: { books: () => fetch('https://api.com/books') }, };
Every field can be resolved separately. 31 const resolvers =
{ Query: { books: () => fetch('https://api.com/books') }, Book: { title: () => return ‘The book title’, author: () => fetch(‘https://api.com/authors’) } };
A single endpoint for data from anywhere { books {
title author } } 32
GraphQL servers are flexible 33 ▪ They can act as
proxies to existing data ▪ They can also act as the business logic layer itself
Tools Supercharging your data
GraphiQL 35
`eslint-plugin-graphql` 36 Catch invalid API calls at compile-time
`apollo-codegen` 37 Catch runtime errors at compile-time
GraphQL enables an entire ecosystem of tools to make developers
more effective. 38
▪ GraphQL makes it really simple to query lots of
data, no matter where it is. 39 In Summary
▪ Just like React, GraphQL can break down complexity into
composable, reusable pieces 40 In Summary
▪ GraphQL.org ▪ GraphQL.com ▪ https://launchpad.graphql.com/ new 41 How to
Get Started
THANKS! 42 @jnwng Presentation template by SlidesCarnival