Intro to GraphQL

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 } } }
12. None

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

35. None

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

40. None
41. None
42. None
43. None
44. None
45. None

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! ✨
47. None
48. None