Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
React & GraphQL – From zero to production
Glenn Reyes
October 10, 2019
Programming
0
13
React & GraphQL – From zero to production
Glenn Reyes
October 10, 2019
Tweet
Share
More Decks by Glenn Reyes
See All by Glenn Reyes
glennreyes
0
42
glennreyes
0
40
glennreyes
1
7
glennreyes
0
42
glennreyes
0
48
glennreyes
0
28
glennreyes
0
55
glennreyes
0
55
glennreyes
1
49
Other Decks in Programming
See All in Programming
mackee
0
560
antonshilov
1
110
gernotstarke
0
380
grapecity_dev
1
190
dbrumann
0
110
emmaglorypraise
0
130
sters
2
130
takapy
0
100
ntaro
0
160
grapecity_dev
0
170
koheisakata
0
100
selcukusta
1
110
Featured
See All Featured
rmw
11
810
akmur
252
19k
brad_frost
157
6.4k
schacon
145
6.6k
philhawksworth
190
17k
chrislema
231
16k
lara
172
9.6k
mthomps
38
2.3k
aarron
257
36k
jeffersonlam
329
15k
bkeepers
52
4.2k
cassininazir
347
20k
Transcript
@glnnrys · glennreyes.com React & GraphQL From zero to production
@glnnrys · glennreyes.com > whoami
@glnnrys · glennreyes.com Glenn Reyes Independent Software Engineer
@glnnrys · glennreyes.com Goals for today
@glnnrys · glennreyes.com Learn
@glnnrys · glennreyes.com Fun
@glnnrys · glennreyes.com Ship
@glnnrys · glennreyes.com What is GraphQL?
@glnnrys · glennreyes.com Query Language for APIs
@glnnrys · glennreyes.com Ask for what you want And get
predictable results
@glnnrys · glennreyes.com
@glnnrys · glennreyes.com A friendly reminder GraphQL is bleeding edge
technology
@glnnrys · glennreyes.com www.graphql.org
@glnnrys · glennreyes.com Describe your data
Describe your data
None
User
Tweet Tweet
User Tweet
Describe your data User Tweet
Describe your data User Tweet name email username bio age
tweets message from
@glnnrys · glennreyes.com Describe your Schema in a Type System
@glnnrys · glennreyes.com type Tweet { id: ID! message: String!
from: User } type User { name: String! email: String! bio: String age: Int tweets: [Tweet!]! username: String! }
@glnnrys · glennreyes.com Int Float String Boolean ID
@glnnrys · glennreyes.com type Query { getUser(email: String!): User! getTweets(username:
String!): [Tweet!]! } type Mutation { createTweet: Tweet deleteTweet(id: ID!): Tweet updateTweet(id: ID!): Tweet }
@glnnrys · glennreyes.com # GET something type Query { getUser(email:
String!): User! getTweets(username: String!): [Tweet!]! } # DO something type Mutation { createTweet: Tweet deleteTweet(id: ID!): Tweet updateTweet(id: ID!): Tweet }
@glnnrys · glennreyes.com # GET something type Query { #
Get a user by the email adress getUser(email: String!): User! # Get tweets getTweets(username: String!): [Tweet!]! } # DO something type Mutation { createTweet: Tweet deleteTweet(id: ID!): Tweet updateTweet(id: ID!): Tweet }
@glnnrys · glennreyes.com type Tweet { id: ID! message: String!
from: User } type User { name: String! email: String! bio: String age: Int tweets: [Tweet!]! username: String! } type Query { getUser(email: String!): User! getTweets(username: String!): [Tweet!]! } type Mutation { createTweet: Tweet deleteTweet(id: ID!): Tweet updateTweet(id: ID!): Tweet }
@glnnrys · glennreyes.com www.graphql.org
@glnnrys · glennreyes.com Ask for what you want
@glnnrys · glennreyes.com Ask for what you want And get
predictable results
@glnnrys · glennreyes.com Ask for what you want And get
predictable results
{ name twitter job expertise oss(type: "most-popular") elseIDo } {
"name": "Glenn Reyes", "twitter": "@glnnrys", "job": "Independent Software Engineer", "expertise": ["React", "GraphQL"], "oss": ["graphpack", "react-countup"], "elseIDo": [ "Co-organize React Vienna", "Speak at conferences", "Give workshops" ] }
{ name twitter job expertise oss(type: "most-popular") elseIDo } {
"name": "Glenn Reyes", "twitter": "@glnnrys", "job": "Independent Software Engineer", "expertise": ["React", "GraphQL"], "oss": ["graphpack", "react-countup"], "elseIDo": [ "Co-organize React Vienna", "Speak at conferences", "Give workshops" ] } GraphQL Query JSON
{ name twitter job expertise oss(type: "most-popular") elseIDo } {
"name": "Glenn Reyes", "twitter": "@glnnrys", "job": "Independent Software Engineer", "expertise": ["React", "GraphQL"], "oss": ["graphpack", "react-countup"], "elseIDo": [ "Co-organize React Vienna", "Speak at conferences", "Give workshops" ] } GraphQL Query JSON
{ name twitter job } { "name": "Glenn Reyes", "twitter":
"@glnnrys", "job": "Independent Software Engineer" } GraphQL Query JSON
@glnnrys · glennreyes.com What is GraphQL?
@glnnrys · glennreyes.com Query Language for APIs
@glnnrys · glennreyes.com Ask for what you want And get
predictable results
@glnnrys · glennreyes.com It's Language Agnostic
@glnnrys · glennreyes.com
@glnnrys · glennreyes.com Why GraphQL?
@glnnrys · glennreyes.com GraphQL Architecture
@glnnrys · glennreyes.com Servers Clients
@glnnrys · glennreyes.com Makes managing data difficult in the frontend
Servers Clients
@glnnrys · glennreyes.com Servers Clients GraphQL
@glnnrys · glennreyes.com Servers Clients GraphQL GraphQL handles data management
for us
@glnnrys · glennreyes.com Servers Clients GraphQL GraphQL handles data management
for us delivers us data exactly as needed
@glnnrys · glennreyes.com Servers Clients GraphQL GraphQL handles data management
for us delivers us data exactly as needed let's us focus on the frontend
@glnnrys · glennreyes.com What else?
@glnnrys · glennreyes.com Tooling
@glnnrys · glennreyes.com Query IDEs
@glnnrys · glennreyes.com github.com/graphql/graphiql
@glnnrys · glennreyes.com github.com/prisma/graphql-playground
@glnnrys · glennreyes.com Automatic Documentation
@glnnrys · glennreyes.com
@glnnrys · glennreyes.com
@glnnrys · glennreyes.com
@glnnrys · glennreyes.com const MyProfile = () => { const
{ data, loading } = useQuery(gql` { name email bio } `); if (loading) { return 'Loading ...'; } return <ProfilePage data={data} />; };
@glnnrys · glennreyes.com Questions?
@glnnrys · glennreyes.com Let's get started!
@glnnrys · glennreyes.com github.com/glennreyes/react-graphql-workshop/tree/webcamp-zagreb-2019