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
Search
jnwng
November 16, 2017
Technology
1
520
Introduction to GraphQL
Real World React November 17th, 2017
jnwng
November 16, 2017
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
Introduction to GraphQL (Reactathon)
jnwng
0
160
Providing Flexibility Through Constraint
jnwng
0
66
Going GraphQL First - ReactSF
jnwng
0
180
Going GraphQL First
jnwng
5
700
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
마라톤 끝의 단거리 스퍼트: 2025년의 AI
inureyes
PRO
1
730
AIのグローバルトレンド 2025 / ai global trend 2025
kyonmm
PRO
1
140
リリース2ヶ月で収益化した話
kent_code3
1
230
Telemetry APIから学ぶGoogle Cloud ObservabilityとOpenTelemetryの現在 / getting-started-telemetry-api-with-google-cloud
k6s4i53rx
0
140
Strands Agents & Bedrock AgentCoreを1分でおさらい
minorun365
PRO
6
290
バクラクによるコーポレート業務の自動運転 #BetAIDay
layerx
PRO
1
920
S3 Glacier のデータを Athena からクエリしようとしたらどうなるのか/try-to-query-s3-glacier-from-athena
emiki
0
210
アカデミーキャンプ 2025 SuuuuuuMMeR「燃えろ!!ロボコン」 / Academy Camp 2025 SuuuuuuMMeR "Burn the Spirit, Robocon!!" DAY 1
ks91
PRO
0
130
僕たちが「開発しやすさ」を求め 模索し続けたアーキテクチャ #アーキテクチャ勉強会_findy
bengo4com
0
2.3k
ロールが細分化された組織でSREと協働するインフラエンジニアは何をするか? / SRE Lounge #18
kossykinto
0
210
Nx × AI によるモノレポ活用 〜コードジェネレーター編〜
puku0x
0
480
Foundation Model × VisionKit で実現するローカル OCR
sansantech
PRO
1
340
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Six Lessons from altMBA
skipperchong
28
3.9k
How GitHub (no longer) Works
holman
314
140k
What's in a price? How to price your products and services
michaelherold
246
12k
Writing Fast Ruby
sferik
628
62k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
We Have a Design System, Now What?
morganepeng
53
7.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Transcript
An Introduction To GraphQL Real World React, November 16, 2017
Jon Wong Frontend Infrastructure, Coursera @jnwng 2
Runtime ▪ Clients ▪ Servers ▪ Tools What We’re Covering
in GraphQL Language ▪ Schemas ▪ Queries ▪ Mutations 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 { project(name: "GraphQL") { tagline
} } 6
Get Predictable Results { project(name: "GraphQL") { tagline } }
7 { "project": { "tagline": "A query language for APIs" } }
A single endpoint for data from anywhere { book {
author { tweets amazonReviews } } } 8
Schemas Describing possible data
Describe everything that is possible ▪ All possible data results
are described by the server. 10
Validation ▪ Every query is validated against the GraphQL schema
▪ No runtime errors for query documents 11
Execution ▪ Query execution utilizes the schema to figure out
what to run, mapping them to “resolvers” 12
The GraphQL Schema gives us the basis of everything that
is possible when communicating to the server from the client. 13
Queries Reading your data
query { someField } { “data”: { “someField”: “someValue” }}
15 A simple query
query MyQueryName { fieldName } 16 A simple query with
a name
query ($someArg: String) { fieldWithArg(name: $someArg) } 17 A simple
query with arguments
query ($someArg: String) { fieldWithArg(name: $someArg) } + { “someArg”:
“my-field-name” } 18 … which requires variables
query { smallPicture: picture(size: 100) mediumPicture: picture(size: 500) largePicture: picture(size:
2000) } 19 A simple query with aliases
Fragments fragment MyFancyFragment on MyResource { someField } 20 These
are required!
Spreading a fragment in a query query { someResource {
...MyFancyFragment } } 21 These two types should match
22 A typical React application
23 … broken down into components ...
24 A complex query
25 A complex query
26 A complex query query CoursePage { course(slug: “Machine Learning”)
{ title description ...University ...Instructor } }
27 <h1>{course.title}</h1> <p>{course.description}</p> <University university={course.university} /> <Instructor instructor={course.instructor} /> Breaking
queries down with fragments query CoursePage { course(slug: “Machine Learning”) { title description ...University ...Instructor } }
28 ▪ 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. 29
Mutations Writing your data
mutation { addToCounter { count } } 31 A simple
mutation { “data”: { “addToCounter”: { “count”: 1 } } }
mutation { addToCounter { count } } 32 A simple
mutation This is a query
mutation { addToCounter { count } second: addToCounter { count
} } 33 Mutations execute serially { “data”: { “addToCounter”: { “count”: 1 }, “second”: { “count”: 2 } } }
Clients Managing your data
Clients make it easier to manage data Relay Apollo 35
Caching ▪ Clients provide advanced caching for GraphQL queries. 36
Caching query ListView { allBooks { id name } }
37 query DetailView ($id: ID) { bookById(id: $id) { name } }
The GraphQL HoC const Component = ({ data: { someField
}}) => <span>{someField}</span> export default graphql(gql` query { someField } `)(Component) 38
39
40 const Instructor = ({ data: { instructor }}) =>
( <View> <ProfilePhoto profile={instructor.profile} /> <span>{instructor.name}</span> </View> ); export default graphql(gql` query { instructor(id: 1) { name profile { ...ProfilePhoto } } } ${ProfilePhoto.fragment} `)(Instructor)
Clients make adopting GraphQL in your application a breeze. 41
Servers Serving your data
Mapping types to resolvers 43 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. 44 const resolvers =
{ Query: { books: () => fetch('https://api.com/books') }, Book: { reviews: () => return [], title: () => fetch(‘https://api.com/titles’) } };
A single endpoint for data from anywhere { book {
author { tweets amazonReviews } } } 45
GraphQL servers are flexible 46 ▪ They can act as
proxies to existing data ▪ They can also become the business logic layer itself
Tools Supercharging your data
GraphiQL 48
`eslint-plugin-graphql` 49 Catch invalid API calls at compile-time
`apollo-codegen` 50 Catch runtime errors at compile-time
GraphQL enables an entire ecosystem of tools to make developers
more effective. 51
▪ GraphQL makes it really simple to query lots of
data, no matter where it is. 52 In Summary
▪ Just like React, GraphQL can break down complexity into
composable, reusable pieces 53 In Summary
▪ GraphQL.org ▪ GraphQL.com ▪ https://launchpad.graphql.com/ new 54 How to
Get Started
THANKS! 55 @jnwng Presentation template by SlidesCarnival