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
150
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
250
An Introduction to GraphQL (ReactJS SF Bay Area)
jnwng
0
120
Providing Flexibility Through Constraint
jnwng
0
56
Introduction to GraphQL
jnwng
1
500
Going GraphQL First - ReactSF
jnwng
0
160
Going GraphQL First
jnwng
5
680
keeping up with javascript
jnwng
3
1k
Presentations 101
jnwng
1
220
SViOS Meetup: HTTP Live Streaming
jnwng
2
400
Other Decks in Technology
See All in Technology
アウトカムを最大化させるプロダクトエンジニアの動き
hacomono
PRO
0
170
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
madoxten
37
25k
プルリクエストレビューを終わらせるためのチーム体制 / The Team for Completing Pull Request Reviews
nekonenene
4
2.1k
AI_Agent_の作り方_近藤憲児
kenjikondobai
6
1.2k
結果的にこうなった。から見える メカニズムのようなもの。
recruitengineers
PRO
1
140
ライフステージの変化を乗り越える 探索型のキャリア選択
tenshoku_draft
2
380
あなたが人生で成功するための5つの普遍的法則 #jawsug #jawsdays2025 / 20250301 HEROZ
yoshidashingo
2
500
開発者体験を定量的に把握する手法と活用事例
ham0215
0
160
開発者のための FinOps/FinOps for Engineers
oracle4engineer
PRO
2
300
“常に進化する”開発現場へ! SHIFTが語るアジャイルQAの未来/20250306 Yuma Murase
shift_evolve
0
170
Amazon Athenaから利用時のGlueのIcebergテーブルのメンテナンスについて
nayuts
0
150
Real World Nix CI/CD編
asa1984
1
160
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.6k
Why Our Code Smells
bkeepers
PRO
336
57k
How to train your dragon (web standard)
notwaldorf
91
5.9k
How to Think Like a Performance Engineer
csswizardry
22
1.4k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Embracing the Ebb and Flow
colly
84
4.6k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
Writing Fast Ruby
sferik
628
61k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Java REST API Framework Comparison - PWX 2021
mraible
29
8.4k
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