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
120
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
260
Introduction to GraphQL (Reactathon)
jnwng
0
160
Providing Flexibility Through Constraint
jnwng
0
65
Introduction to GraphQL
jnwng
1
520
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
なぜAI時代に 「イベント」を中心に考えるのか? / Why focus on "events" in the age of AI?
ytake
2
800
CSPヘッダー導入で実現するWebサイトの多層防御:今すぐ試せる設定例と運用知見
llamakko
1
260
Tiptapで実現する堅牢で柔軟なエディター開発
kirik
1
150
クマ×共生 HACKATHON - 熊対策を『特別な行動」から「生活の一部」に -
pharaohkj
0
180
新規事業におけるAIリサーチの活用例
ranxxx
0
170
Expertise as a Service via MCP
yodakeisuke
1
160
Power Automate のパフォーマンス改善レシピ / Power Automate Performance Improvement Recipes
karamem0
0
270
Jitera Company Deck / JP
jitera
0
250
robocopy の怖い話/scary-story-about-robocopy
emiki
0
400
増え続ける脆弱性に立ち向かう: 事前対策と優先度づけによる 持続可能な脆弱性管理 / Confronting the Rise of Vulnerabilities: Sustainable Management Through Proactive Measures and Prioritization
nttcom
1
210
AI工学特論: MLOps・継続的評価
asei
10
2k
自分がLinc’wellで提供しているプロダクトを理解するためにやったこと
murabayashi
1
170
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Statistics for Hackers
jakevdp
799
220k
Agile that works and the tools we love
rasmusluckow
329
21k
GraphQLとの向き合い方2022年版
quramy
49
14k
Thoughts on Productivity
jonyablonski
69
4.8k
Raft: Consensus for Rubyists
vanstee
140
7k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
1k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Why Our Code Smells
bkeepers
PRO
337
57k
Building Applications with DynamoDB
mza
95
6.5k
Code Review Best Practice
trishagee
69
19k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
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