Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Intro to GraphQL

Intro to GraphQL

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

E69fae4b61795cb1b7916cd1fbd9403c?s=128

Alex ✨🌱

August 15, 2018
Tweet

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