$30 off During Our Annual Pro Sale. View Details »

Introduction to GraphQL

Introduction to GraphQL

Learn about GraphQL, how it works, and how to use it.

Adrián Matellanes

September 23, 2017
Tweet

More Decks by Adrián Matellanes

Other Decks in Programming

Transcript

  1. Introduction to GraphQL

    View Slide

  2. GET https://2017.es.pycon.org/speakers/me
    {
    "name": "Adrián Matellanes",
    "roles": [
    "Lead API Developer",
    "Málaga Python Organizer"
    ],
    "worksAt": "Ebury",
    "twitter": "@_amatellanes",
    "github": "github.com/amatellanes"
    }

    View Slide

  3. What’s GraphQL?

    View Slide

  4. A programming language

    View Slide

  5. A special type of database

    View Slide

  6. A library

    View Slide

  7. A Query Language for APIs

    View Slide

  8. Why GraphQL?

    View Slide

  9. Due to the nature of REST

    View Slide

  10. REST Problems

    View Slide

  11. GET /characters/1
    { "name": "Jon Snow" }

    View Slide

  12. "url": "http://anapioficeandfire.com/api/characters/583",
    "name": "Jon Snow",
    "culture": "Northmen",
    "born": "In 283 AC",
    "titles": [
    "Lord Commander of the Night's Watch"
    ],
    "aliases": [
    "Lord Snow",
    "Ned Stark's Bastard",
    "The Snow of Winterfell",
    "The Bastard of Winterfell",
    "Lord Crow"
    ],
    "allegiances": [
    "http://anapioficeandfire.com/api/houses/362"
    ],
    "books": [
    "http://anapioficeandfire.com/api/books/5"
    ],
    "povBooks": [
    "http://anapioficeandfire.com/api/books/1",
    "http://anapioficeandfire.com/api/books/2",
    "http://anapioficeandfire.com/api/books/3",
    "http://anapioficeandfire.com/api/books/8"

    View Slide

  13. Round Trip and Repeat Trip Times

    View Slide

  14. View Slide

  15. /episodes/1

    View Slide

  16. /episodes/1
    /characters/345
    /characters/563
    /characters/802
    /characters/441
    /characters/674

    View Slide

  17. /episodes/1
    /characters/345
    /characters/563
    /characters/802
    /characters/441
    /characters/674
    /reviews/3512

    View Slide

  18. Over/Under Fetching

    View Slide

  19. /episodes/1?fields=characters(name,playedBy)

    View Slide

  20. /episode_with_all_stuff
    /episode_with_amazing_pictures
    /episode_with_stuff_i_need_today
    /episode_with_stuff_for_mobile_app
    /episode_with_actors_and_reviews_and_images
    /episode_with_stuff_for_mobile_app_v2
    /episode_with_actors_and_reviews_but_no_images

    View Slide

  21. /episode_with_all_stuff
    /episode_with_amazing_pictures
    /episode_with_stuff_i_need_today
    /episode_with_stuff_for_mobile_app
    /episode_with_stuff_for_mobile_app_v2
    /episode_with_actors_and_reviews_and_images
    /episode_with_actors_and_reviews_but_no_images

    View Slide

  22. View Slide

  23. https://code.facebook.com/projects/

    View Slide

  24. Created July 1, 2015
    Updated September 20, 2017
    381 Forks
    6,078 Stars
    302 Commits
    82 Open Issues
    https://github.com/facebook/graphql

    View Slide

  25. View Slide

  26. “You will receive what you ask for no more, no less.”
    - Mark Allen

    View Slide

  27. View Slide

  28. View Slide

  29. View Slide

  30. View Slide

  31. View Slide

  32. View Slide

  33. View Slide

  34. View Slide

  35. View Slide

  36. View Slide

  37. View Slide

  38. GraphQL vs. REST

    View Slide

  39. REST Model

    View Slide

  40. Client
    /books /characters /houses
    Databases Services External APIs

    View Slide

  41. GraphQL Model

    View Slide

  42. Client
    Databases Services External APIs
    /graphql/

    View Slide

  43. Anatomy of a GraphQL

    View Slide

  44. {
    me {
    name
    }
    }

    View Slide

  45. {
    me {
    name
    }
    }
    {
    "me": {
    "name": "Jon Snow"
    }
    }

    View Slide

  46. Scalar types

    View Slide

  47. Int
    Float
    String
    Boolean
    ID
    Date
    enum

    View Slide

  48. GraphQL Schema Definition Language

    View Slide

  49. type Query {
    allCharacters: [Character]!
    character(id: ID!): Character
    }

    View Slide

  50. type Query {
    allCharacters: [Character]!
    character(id: ID!): Character
    }
    Root Type

    View Slide

  51. type Query {
    allCharacters: [Character]!
    character(id: ID!): Character
    }
    Root Fields

    View Slide

  52. type Query {
    allCharacters: [Character]!
    character(id: ID!): Character
    }
    Arguments

    View Slide

  53. type Query {
    allCharacters: [Character]!
    character(id: ID!): Character
    }
    Return Types

    View Slide

  54. type Character {
    name: String!
    house: House!
    }
    type House {
    name: String!
    words: String!
    members: [Character]!
    }

    View Slide

  55. type Character {
    name: String!
    house: House!
    }
    type House {
    name: String!
    words: String!
    members: [Character]!
    }
    Object Type

    View Slide

  56. type Character {
    name: String!
    house: House!
    }
    type House {
    name: String!
    words: String!
    members: [Character]!
    }
    Fields

    View Slide

  57. type Character {
    name: String!
    house: House!
    }
    type House {
    name: String!
    words: String!
    members: [Character]!
    }
    Return Types

    View Slide

  58. Queries for fetching data
    from the server

    View Slide

  59. query CharactersNameAndHouse {
    allCharacters {
    name
    house {
    words
    }
    }
    }

    View Slide

  60. query CharactersNameAndHouse {
    allCharacters {
    name
    house {
    words
    }
    }
    }
    Operation Type

    View Slide

  61. query CharactersNameAndHouse {
    allCharacters {
    name
    house {
    words
    }
    }
    }
    Operation Name

    View Slide

  62. query CharactersNameAndHouse {
    allCharacters {
    name
    house {
    words
    }
    }
    }
    Selection Set

    View Slide

  63. query CharactersNameAndHouse {
    allCharacters {
    name
    house {
    words
    }
    }
    }
    Fields

    View Slide

  64. query CharactersNameAndHouse {
    allCharacters {
    name
    house {
    words
    }
    }
    }
    {
    "data": {
    "allCharacters": [
    {
    "name": "Daenerys Targaryen",
    "house": {
    "words": "Fire and Blood"
    }
    },
    {
    "name": "Jon Snow",
    "house": {
    "words": "Winter Is Coming"
    }
    }
    ]
    }
    }

    View Slide

  65. query {
    character(name: "Hodor") {
    name
    house {
    words
    }
    }
    }
    Arguments

    View Slide

  66. query CharacterByName($name: String!) {
    character(name: $name) {
    name
    }
    }
    {
    "name": "Hodor"
    }
    Variables

    View Slide

  67. query {
    character(name: "Hodor") {
    ...CharacterFragment
    }
    }
    fragment CharacterFragment on Character {
    name
    house {
    words
    }
    }
    Fragments

    View Slide

  68. {
    character(name: "Hodor") {
    ... on Character {
    name
    house {
    words
    }
    }
    }
    }
    Inline Fragments

    View Slide

  69. Mutations for manipulating data
    and fetch the updated result

    View Slide

  70. type Mutation {
    createCharacter(name: String!): Character
    }

    View Slide

  71. mutation CharacterMutation {
    createCharacter(name: "Sansa Stark") {
    name
    }
    }
    {
    "data": {
    "createCharacter": {
    "name": "Sansa Stark"
    }
    }
    }

    View Slide

  72. Subscriptions for real-time updates

    View Slide

  73. type Subscription {
    newCharacter: Character!
    }

    View Slide

  74. subscription NewCharacterSubscription {
    newCharacter {
    name
    }
    }
    {
    "data": {
    "newCharacter": {
    "name": "Tyrion Lannister"
    }
    }
    }

    View Slide

  75. Query Execution

    View Slide

  76. {
    getHouse(id: 5) {
    name
    words
    members {
    name
    }
    }
    }

    View Slide

  77. name words members
    getHouse(id: 5)
    { name, words, members }
    [ { name }, { name } ]
    name name

    View Slide

  78. QUERY
    name words members
    getHouse(id: 5)
    { name, words, members }
    [ { name }, { name } ]
    name name

    View Slide

  79. QUERY getHouse(id: 5)
    { name, words, members }
    HOUSE name words members
    [ { name }, { name } ]
    name name

    View Slide

  80. QUERY getHouse(id: 5)
    { name, words, members }
    HOUSE name words members
    [ { name }, { name } ]
    CHARACTER name name

    View Slide

  81. Clients with Super Powers

    View Slide

  82. Introspection Queries

    View Slide

  83. {
    "data": {
    "__type": {
    "name": "Book",
    "kind": "OBJECT",
    "fields": [
    {
    "name": "title",
    "type": {
    "name": "String"
    }
    }
    ]
    }
    }
    }
    {
    __type(name: "Book") {
    name
    kind
    fields {
    name
    type {
    name
    }
    }
    }
    }

    View Slide

  84. View Slide

  85. GraphiQL

    View Slide

  86. View Slide

  87. Graphene
    GraphQL framework for Python

    View Slide

  88. Created September 24, 2015
    Updated September 20, 2017
    229 Forks
    2,356 Stars
    1,219 Commits
    87 Open Issues
    https://github.com/graphql-python/graphene

    View Slide

  89. View Slide

  90. View Slide

  91. "It’s important to understand that it isn’t all or nothing.
    GraphQL is in our future, but it isn’t our exclusive
    future."

    View Slide

  92. Thank you!

    View Slide