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
230
Introduction to GraphQL (Reactathon)
jnwng
0
140
Providing Flexibility Through Constraint
jnwng
0
52
Introduction to GraphQL
jnwng
1
460
Going GraphQL First - ReactSF
jnwng
0
160
Going GraphQL First
jnwng
5
620
keeping up with javascript
jnwng
3
990
Presentations 101
jnwng
1
220
SViOS Meetup: HTTP Live Streaming
jnwng
2
380
Other Decks in Technology
See All in Technology
【shownet.conf_】コンピューティング資源を統合した分散コンテナ基盤の進化
shownet
PRO
0
300
【shownet.conf_】ShowNet伝送改めShowNet APN 2024
shownet
PRO
0
330
業務ヒアリングと知識の呪い
tamai_63
0
130
AWSへのNIST SP800-171管理策 導入に向けての整備/20240930 Mitsutoshi Matsuo
shift_evolve
0
150
Slackbot × RAG で実現する社内情報検索の最適化
howdy39
2
230
テストコードの品質を客観的な数値で担保しよう〜Mutation Testのすすめ〜
ysknsid25
8
1.5k
Authenticator のエミュレーションによる パスキーのログインテスト/nikkei-tech-talk-25
nikkei_engineer_recruiting
0
140
Pythonを活用したLLMによる構造的データ生成の手法と実践
brainpadpr
3
230
Causal Impactを用いたLINE Pay UIの効果検証とABテスト実施への貢献
lycorptech_jp
PRO
3
500
[JAWS-UG GameTech] 第6回 各種事例紹介_18TRIPにおけるAWSサービスを活用した負荷テスト・障害テスト
naoto_yasuda
0
120
スモールスタート、不都合な真実 〜 耳当たりの良い言葉に現場が振り回されないために/20240930-ssmjp-small-start
opelab
13
1.7k
成果のためのコミュニケーション - 語彙を育てよう -/communication-for-good-outcome-developing-vocabulary
hassaku63
4
150
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.3k
Web Components: a chance to create the future
zenorocha
310
42k
A Tale of Four Properties
chriscoyier
155
22k
Web development in the modern age
philhawksworth
205
10k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
38
2.1k
The Language of Interfaces
destraynor
154
24k
Building Better People: How to give real-time feedback that sticks.
wjessup
360
19k
The Invisible Customer
myddelton
119
13k
Designing for humans not robots
tammielis
249
25k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Making Projects Easy
brettharned
114
5.8k
Building a Scalable Design System with Sketch
lauravandoore
459
32k
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