Intro to GraphQL

GraphQL: What it is, how it works, how to use it

Transcript

1. Alex, she/they, freelance dev, @somehats
2. Intro to graphql
3. What is graphql? “A query language for APIs” Released by facebook in 2015
4. Data = cats??
5. Data = cats??
6. Data = cats??
7. Client <-> GraphQL <-> Server <-> Datastore
8. Client <-> GraphQL <-> Server <-> Datastore
9. Client <-> GraphQL <-> Server <-> Datastore query { allEggs { totalCount } }
10. Client <-> GraphQL <-> Server <-> Datastore query { allEggs { totalCount } }
11. Client <-> GraphQL <-> Server <-> Datastore query { allEggs { totalCount } } { “data”: { “allEggs”: { “totalCount”: 4 } } }
13. How to GraphQL 1. Schema 2. Queries 3. Mutations
14. Schema Penguin type Apple type Relation between penguin and apple? type Penguin { id: ID name: String age: Int }
15. Schema Penguin type Apple type Relation between penguin and apple? type Apple { id: ID size: Float colour: String }
16. Schema Penguin type Apple type Relation between penguin and apple?
17. Schema Penguin type Apple type Relation between penguin and apple?
18. Schema Penguin type Apple type Relation between penguin and apple? type Penguin { id: ID name: String age: Int } type Apple { id: ID size: Float colour: String }
19. Schema Penguin type Apple type Relation between penguin and apple? type Penguin { id: ID name: String age: Int apples: [Apple] } type Apple { id: ID size: Float colour: String owner: Penguin grower: Penguin }
20. query { penguin(name: “Liz”) { id name } }
21. query { penguin(name: “Liz”) { id name } } { “data”: { “penguin”: { “id”: “1234”, “name”: “Liz” } } }
22. query { penguin(name: “Liz”) { id name age } } { “data”: { “penguin”: { “id”: “1234”, “name”: “Liz” } } }
23. query { penguin(name: “Liz”) { id name age } } { “data”: { “penguin”: { “id”: “1234”, “name”: “Liz”, “age”: 94 } } }
24. query { penguin(name: “Liz”) { id name age apples } } { “data”: { “penguin”: { “id”: “1234”, “name”: “Liz”, “age”: 94 } } }
25. query { penguin(name: “Liz”) { id name age apples { size colour } } } { “data”: { “penguin”: { “id”: “1234”, “name”: “Liz”, “age”: 94 } } }
26. query { penguin(name: “Liz”) { id name age apples { size colour } } } { “data”: { “penguin”: { “id”: “1234”, “name”: “Liz”, “age”: 94, “apples”: [{ “size”: 5, “colour”: “red” }, { “size”: 8, “colour”: “red” }] } } }
27. You get what you ask for No more, no less
28. Mutations Not penguins turning into penguin horses Mutation = changing data
29. GraphQL Mutations Create - Update - Delete
30. Cat egg mutation { createApple(size: 13) { id size colour } } { “data”: { “createApple”: { “id”: “3”, “size”: 13, “colour”: “red” } } }
31. DEMO TIME OH NO
32. DEMO TIME OH NO
33. DEMO TIME OH NO
34. GraphQL and REST hold hands
36. GQL vs REST • Get exactly what you need, in 1 perfect request • Requires smart caching on client side • Powerful standard tooling + great usability out the box • New and shiny • Often several requests needed to get all data • Great caching solution by default • Also great tooling, but less awesome for free • Established standard
37. Getting started
38. graph.cool + postgraphql
39. Clients
46. • http://graphql.org/ - GraphQL language spec and documentation • https://www.graphql.com/tutorials/ - awesome guides and tutorials • https://www.graph.cool/docs/quickstart/ - probably the fastest way to get started with GraphQL • http://dev.apollodata.com/ - docs and tutorials for Apollo Client • https://github.com/chentsulin/awesome-graphql - Community list of awesome graphql related things • Me! ✨