EVERYTHING YOU NEED TO KNOW ABOUT
GraphQL
in 3 Components
Eve Porcello
@eveporcello
link: bit.ly/graphql-react-rally
![](https://s3.amazonaws.com/media-p.slid.es/uploads/891525/images/4994316/GraphQL_Logo.svg.png)
8%
![](https://s3.amazonaws.com/media-p.slid.es/uploads/891525/images/5170944/c91299c4850b8c39d224bbbeaccf4c29--cone-montanhas-by-vexels.png)
3.2%
![](https://s3.amazonaws.com/media-p.slid.es/uploads/891525/images/5170949/5a29d537b352d7.5906682415126909997345.png)
Tahoe City, California
Salt Lake City, Utah
🍺
function howMuchShouldIDrink(n, isSLC, talksTomorrow) {
var drinks = n + 1
if(isSLC) {
var slcDrinks = drinks * 3
return slcDrinks - talksTomorrow
}
return drinks - talksTomorrow
}
howMuchShouldIDrink(3, true, 1)
// 11 drinks
d = 1
d = 2
d = 3
d = 4
d = 5
d = 6
d = 7
d = 8
d = 9
d = 10
d = 11
![](https://s3.amazonaws.com/media-p.slid.es/uploads/891525/images/5167606/Screen_Shot_2018-08-09_at_2.52.40_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/891525/images/4994199/51s8fBRxqEL._SX379_BO1_204_203_200_.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/891525/images/4994316/GraphQL_Logo.svg.png)
GraphQL is a query language for your API.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/891525/images/4994316/GraphQL_Logo.svg.png)
https://treefest.com/attendees
https://treefest.com/vendors
https://treefest.com/musicians
https://treefest.com/trees
https://treefest.com/graphql
query {
allAttendees {
name
favoriteMusician {
name
}
favoriteTree {
name
}
vendor
}
}
https://treefest.com/graphql
{
"data":{
"allAttendees": [
{
"name": "Jean Johnson",
"favoriteMusician": {
"name": "Plantadestiny"
},
"favoriteTree": {
"name": "SugarPine"
},
"vendor": false
}
]
}
}
https://treefest.com/graphql
![](https://s3.amazonaws.com/media-p.slid.es/uploads/891525/images/5171199/throbber_13.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/891525/images/5171202/Green-Tick-Transparent-PNG-363x279.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/891525/images/5171199/throbber_13.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/891525/images/5171199/throbber_13.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/891525/images/5171199/throbber_13.gif)
https://treefest.com/attendees
https://treefest.com/vendors
https://treefest.com/musicians
https://treefest.com/trees
![](https://s3.amazonaws.com/media-p.slid.es/uploads/891525/images/5171214/787515-200.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/891525/images/5171234/noun_Sad_Phone_358467_1A1A1A.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/891525/images/5009826/4cda10988bd20bd0a11c5d106621c93d.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/891525/images/5009826/4cda10988bd20bd0a11c5d106621c93d.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/891525/images/5009826/4cda10988bd20bd0a11c5d106621c93d.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/891525/images/5009826/4cda10988bd20bd0a11c5d106621c93d.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/891525/images/5009826/4cda10988bd20bd0a11c5d106621c93d.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/891525/images/5171202/Green-Tick-Transparent-PNG-363x279.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/891525/images/5171199/throbber_13.gif)
https://treefest.com/graphql
![](https://s3.amazonaws.com/media-p.slid.es/uploads/891525/images/5171214/787515-200.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/891525/images/5171233/noun_happy_phone_358468_e535ab.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/891525/images/5174218/blue-cloud-clipart-clipart-panda-free-clipart-images-sWbedc-clipart.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/891525/images/5009826/4cda10988bd20bd0a11c5d106621c93d.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/891525/images/5009826/4cda10988bd20bd0a11c5d106621c93d.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/891525/images/5009826/4cda10988bd20bd0a11c5d106621c93d.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/891525/images/5009826/4cda10988bd20bd0a11c5d106621c93d.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/891525/images/5009826/4cda10988bd20bd0a11c5d106621c93d.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/891525/images/4994316/GraphQL_Logo.svg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/891525/images/5172123/6175512_sd.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/891525/images/5172127/c35b8124-40f1-47ec-b357-db11dcd3cb93_1.dd0ed45488cca19e58509161402a2699.jpeg)
GraphQL is better than REST.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/891525/images/5173963/IMG_6115.png)
well, actually
![](https://s3.amazonaws.com/media-p.slid.es/uploads/891525/images/5173968/18677-200.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/891525/images/5179060/tuft-and-needle-phoenix-midtown.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/891525/images/5171233/noun_happy_phone_358468_e535ab.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/891525/images/5174167/Mitsubishi-MSZGL80VGDKIT-7.8kW-Reverse-Cycle-Split-Inverter-Air-Conditioner-Lifestyle-2-high.jpeg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/891525/images/5174202/normal_ian-symbol-weather-wind-02.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/891525/images/5174202/normal_ian-symbol-weather-wind-02.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/891525/images/5174202/normal_ian-symbol-weather-wind-02.png)
How Do I Actually Learn This?
Vanilla GraphQL
![](https://s3.amazonaws.com/media-p.slid.es/uploads/891525/images/5167207/H0Ym3d-ice-cream-hd-photo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/892597/images/5177640/logo.57ee3b60.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/891525/images/5167420/Screen_Shot_2018-08-09_at_1.11.45_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/891525/images/5167422/Screen_Shot_2018-08-09_at_1.12.24_PM.png)
GraphQL is just a spec.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/891525/images/5167245/Screen_Shot_2018-08-09_at_11.40.15_AM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/891525/images/5169797/apollo-logo.png)
react-apollo
<Query />
<Mutation />
<Subscription />
<ApolloProvider />
Demo
<Subscription subscription={GAME_CHANGE_SUBSCRIPTION}>
{({ loading, data }) => loading ?
<p>Waiting for Instruments...</p> :
<div>
<ul>
{data.gameChange.playingMusic.map((p, i) =>
<li key={i}>{p.instrument}</li>
)}
</ul>
</div>
}
</Subscription>
Thank you!
@eveporcello
www.graphqlworkshop.com
www.moonhighway.com
bit.ly/graphql-react-rally
![](https://s3.amazonaws.com/media-p.slid.es/uploads/891525/images/5009727/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/891525/images/5009262/Screen_Shot_2018-06-08_at_11.45.31_AM.png)
React Rally 2018
By Moon Highway
React Rally 2018
- 1,185