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
September 26, 2019
0
51
React & GraphQL – From zero to production
Glenn Reyes
September 26, 2019
Tweet
Share
More Decks by Glenn Reyes
See All by Glenn Reyes
Building modern React applications
glennreyes
0
71
Drawing the line between 3rd party and custom code
glennreyes
0
70
React & GraphQL – From zero to production
glennreyes
0
17
Drawing the line betweek 3rd party and custom code
glennreyes
1
14
Building modern React applications
glennreyes
0
46
UpLeveled___GraphQL_for_JS_developers.pdf
glennreyes
0
34
Drawing the line between 3rd party and handcrafted code
glennreyes
0
69
React Finland – React & GraphQL – From zero to production
glennreyes
0
66
With great power comes great React Hooks!
glennreyes
1
51
Featured
See All Featured
Clear Off the Table
cherdarchuk
79
290k
Documentation Writing (for coders)
carmenintech
48
2.6k
What's in a price? How to price your products and services
michaelherold
229
9.4k
The World Runs on Bad Software
bkeepers
PRO
57
5.4k
GraphQLの誤解/rethinking-graphql
sonatard
31
6.8k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
15
980
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
37
3.3k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
236
1.1M
10 Git Anti Patterns You Should be Aware of
lemiorhan
638
52k
Robots, Beer and Maslow
schacon
152
7.1k
Code Reviewing Like a Champion
maltzj
506
37k
No one is an island. Learnings from fostering a developers community.
thoeni
9
1.3k
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 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