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
An Introduction to GraphQL (ReactJS SF Bay Area)
Search
jnwng
April 12, 2018
Technology
0
110
An Introduction to GraphQL (ReactJS SF Bay Area)
A beginner-level introduction to GraphQL
jnwng
April 12, 2018
Tweet
Share
More Decks by jnwng
See All by jnwng
Evolving the Graph
jnwng
1
240
Introduction to GraphQL (Reactathon)
jnwng
0
150
Providing Flexibility Through Constraint
jnwng
0
54
Introduction to GraphQL
jnwng
1
490
Going GraphQL First - ReactSF
jnwng
0
160
Going GraphQL First
jnwng
5
640
keeping up with javascript
jnwng
3
1k
Presentations 101
jnwng
1
220
SViOS Meetup: HTTP Live Streaming
jnwng
2
390
Other Decks in Technology
See All in Technology
ゼロから創る横断SREチーム 挑戦と進化の軌跡
rvirus0817
2
260
AWS re:Invent 2024 ふりかえり
kongmingstrap
0
130
Snykで始めるセキュリティ担当者とSREと開発者が楽になる脆弱性対応 / Getting started with Snyk Vulnerability Response
yamaguchitk333
2
180
20241214_WACATE2024冬_テスト設計技法をチョット俯瞰してみよう
kzsuzuki
3
440
DevOps視点でAWS re:invent2024の新サービス・アプデを振り返ってみた
oshanqq
0
180
10分で学ぶKubernetesコンテナセキュリティ/10min-k8s-container-sec
mochizuki875
3
330
C++26 エラー性動作
faithandbrave
2
700
Microsoft Azure全冠になってみた ~アレを使い倒した者が試験を制す!?~/Obtained all Microsoft Azure certifications Those who use "that" to the full will win the exam! ?
yuj1osm
2
110
なぜCodeceptJSを選んだか
goataka
0
160
終了の危機にあった15年続くWebサービスを全力で存続させる - phpcon2024
yositosi
0
280
第3回Snowflake女子会_LT登壇資料(合成データ)_Taro_CCCMK
tarotaro0129
0
180
LINE Developersプロダクト(LIFF/LINE Login)におけるフロントエンド開発
lycorptech_jp
PRO
0
120
Featured
See All Featured
RailsConf 2023
tenderlove
29
940
Side Projects
sachag
452
42k
Faster Mobile Websites
deanohume
305
30k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5k
How to Think Like a Performance Engineer
csswizardry
22
1.2k
4 Signs Your Business is Dying
shpigford
181
21k
Agile that works and the tools we love
rasmusluckow
328
21k
Statistics for Hackers
jakevdp
796
220k
Fireside Chat
paigeccino
34
3.1k
We Have a Design System, Now What?
morganepeng
51
7.3k
Testing 201, or: Great Expectations
jmmastey
40
7.1k
Transcript
An Introduction To GraphQL ReactJS SF Bay Area, 4/12/2018
Jon Wong Frontend Infrastructure, Coursera @jnwng 2
Who is this talk for? ▪ Folks who deal with
complex React applications ▪ Folks who use APIs (like REST) on a day-to-day basis ▪ Folks who want to know more about GraphQL! 3
Runtime ▪ Clients ▪ Servers ▪ Tools What We’re Covering
in GraphQL Language ▪ Schemas ▪ Queries ▪ Operations 4
What is GraphQL? Taken straight from GraphQL.org
Describe your Data 6 type Project { name: String tagline:
String contributors: [User] }
Ask for What You Want 7 query { project(name: "GraphQL")
{ tagline } }
Get Predictable Results 8 query { project(name: "GraphQL") { tagline
} } { "project": { "tagline": "A query language for APIs" } } GraphQL JSON
Schemas Describing possible data
Describe everything that is possible ▪ All possible data results
are described by the server. 10
Describe everything that is possible 11 type Project { name:
String tagline: String contributors: [User] }
Discoverability ▪ Exploring an API is no longer a burden
12
GraphiQL 13
Validation ▪ Every query is validated against the GraphQL schema
▪ No runtime errors for making API calls 14
The GraphQL schema gives us the basis of everything that
is possible when communicating to the server from the client. 15
Queries Reading your data
17 A simple query query { project(name: "GraphQL") { tagline
} } { "project": { "tagline": "A query language for APIs" } }
18 A simple query with a name query AQueryWithAName {
project(name: "GraphQL") { tagline } }
19 A simple query with arguments query ($projectName: String!){ project(name:
$projectName) { tagline } }
20 … which requires variables query ($projectName: String!){ project(name: $projectName)
{ tagline } } { “projectName”: “react” } query variables
query { react: project(name: “react”){ tagline } graphql: project(name: “graphql”)
{ tagline } } 21 A simple query with aliases
22 … which returns what you expect { “react”: {
“tagline”: “A JavaScript library for building user interfaces” }, “graphql”: { “tagline”: “A query language for APIs” } }
Fragments 23 fragment Contributors on Project { name contributors }
Spreading a fragment in a query 24 query { project(name:
"GraphQL") { tagline ...Contributors } } query { project(name: "GraphQL") { tagline name contributors } } These turn out the same!
GraphQL queries allow the client to declare exactly what it
needs, in the form that it needs it in. 25
React && Queries Declarative + Composable
27 A typical React application
28 … broken down into components.
29 This is how we normally get the data fetch(‘/courses/machine-learning’)
fetch(‘/partners/?course=machine-learning’) fetch(‘/instructors/?course=machine-learning’)
30 A complex GraphQL query query CoursePage { course(slug: “machine-learning”)
{ title description partner { name logo } instructor { name title photoUrl } } }
31 A complex GraphQL query query CoursePage { course(slug: “machine-learning”)
{ title description ...Partner ...Instructor } }
32 A complex GraphQL query fragment Partner on Course {
partner { name logo } } fragment Instructor on Course { instructor { name title photoUrl } }
33 ▪ Components can be more portable ▪ Components are
more self-sufficient. Every component can declare its own data requirements
Clients Managing your data
Clients make it easier to manage data Relay Apollo 35
Caching ▪ Clients provide advanced caching for GraphQL queries. 36
Caching 37 query ListView { allBooks { id name }
} query DetailView ($id: ID) { bookById(id: $id) { name } }
The GraphQL HoC 38 const ProjectTitle = ({ data: {
project: { tagline } } }) => <h1>{tagline}</h1>; export default graphql(gql` query { project(name: “graphql”) { tagline } } `)(ProjectTitle);
Clients make adopting GraphQL in your application a breeze. 39
Servers Serving your data
Mapping types to resolvers 41 const typeDefs = ` type
Query { projects: [Project] } type Project { name: String tagline: String contributors: [User] } `; const resolvers = { Query: { projects: () => fetch('https://api.com/project’) }, };
Every field can be resolved separately. 42 const resolvers =
{ Project: { name: () => return ‘graphql’, tagline: () => 'A query language for APIs’, contributors: () => fetch(‘/users/?projectName=graphql’) } };
GraphQL servers are flexible 43 ▪ They can act as
proxies to existing data ▪ They can also become the business logic layer itself
Tools Supercharging your data
GraphiQL 45
`eslint-plugin-graphql` 46 Catch invalid API calls at compile-time
`apollo-codegen` 47 Catch runtime errors at compile-time
GraphQL enables an entire ecosystem of tools to make developers
more effective. 48
▪ GraphQL makes it really simple to query lots of
data, no matter where it is. 49 In Summary
▪ Just like React, GraphQL can break down complexity into
composable, reusable pieces 50 In Summary
▪ GraphQL.org ▪ GraphQL.com ▪ https://launchpad.graphql.com/ new 51 How to
Get Started
THANKS! 52 @jnwng Presentation template by SlidesCarnival