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
140
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
230
An Introduction to GraphQL (ReactJS SF Bay Area)
jnwng
0
110
Providing Flexibility Through Constraint
jnwng
0
51
Introduction to GraphQL
jnwng
1
440
Going GraphQL First - ReactSF
jnwng
0
150
Going GraphQL First
jnwng
5
590
keeping up with javascript
jnwng
3
980
Presentations 101
jnwng
1
220
SViOS Meetup: HTTP Live Streaming
jnwng
2
370
Other Decks in Technology
See All in Technology
成長期に歩みを止めないための創業期の開発文化形成
mayah
6
420
ソフトウェアエンジニアリングの知見を活かして データ基盤をいい感じにする on Snowflake [MIERUNE BBQ #10]
mtpooh
2
150
クラウド利用者の「責任」をどう果たす?AWSセキュリティ対策のススメ #AWSSummit
hiashisan
0
280
Luupの開発組織におけるインシデントマネジメントの変遷 ver.RoadtoSRENEXT2024
grimoh
1
270
Classmethod流のPlatform Engineering / classmethod-platform-engineering-devio2024
tomoki10
0
480
JBUG岡山 #6 WordCamp男木島の チームビルディング
takeshifurusato
0
150
AIエージェントを現場に導入する目線とは
masahiro_nishimi
1
1.5k
What if...? 처음부터 다시 LLM 어플리케이션을 개발한다면
huffon
0
1k
データ分析基盤を作ってみよう~設計編~
nrinetcom
PRO
1
110
VPoEの視点から見た、ヘンリーがサーバーサイドKotlinを使う理由 / Why Server-side Kotlin 2024
cho0o0
1
420
DevIO2024_レガシー運用からの脱却 -クラウド活用の実践事例とベストプラクティス-
jun2882
0
210
テスト・設計研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
Featured
See All Featured
Become a Pro
speakerdeck
PRO
15
4.8k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
277
13k
YesSQL, Process and Tooling at Scale
rocio
166
14k
Fantastic passwords and where to find them - at NoRuKo
philnash
42
2.7k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Typedesign – Prime Four
hannesfritz
37
2.2k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
16
1.6k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
23
1.9k
Principles of Awesome APIs and How to Build Them.
keavy
124
16k
Practical Orchestrator
shlominoach
185
10k
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