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

GraphQL: The next evolution for Web APIs?

GraphQL: The next evolution for Web APIs?

REST has become the de-facto standard for web APIs. However the constraints imposed by the standard sometimes make it hard to work with. What if you want to get a list of all posts written by a user and all friends of that user that liked the post? In REST this means hitting at least 4 different API endpoints. In GraphQL, a new approach to interacting with an API, this same operation could be done with only one request! In this webinar we will go over the general structure of GraphQL, key differences to REST and then look at a client-server example implementation to see hands-on how the same use case looks like in REST and GraphQL.

Marcel Neidinger

June 16, 2020
Tweet

More Decks by Marcel Neidinger

Other Decks in Programming

Transcript

  1. Marcel Neidinger
    Associate Solutions Engineer
    16/06/2020
    The next evolution for Web APIs?
    GraphQL

    View Slide

  2. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
    graphql {
    old_times
    what
    how
    why
    examples
    }

    View Slide

  3. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
    old_times

    View Slide

  4. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Confidential

    View Slide

  5. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
    Kid, let me
    take you back
    to 2019 …

    View Slide

  6. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
    … when we
    could still
    travel …

    View Slide

  7. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
    … and used
    REST to do API
    interactions

    View Slide

  8. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
    Webex
    API
    GET /api/v1/people/me
    HTTP/1.1 200 OK
    Date: Thu, 10 Oct 2019 03:59:02 GMT
    Content-Type: application/json
    {
    “id”: “Y2lzY29zcGFyazovL3VzLA”,
    ”emails”: [
    [email protected]
    }
    }
    Header
    Body
    Location
    Method Identifier

    View Slide

  9. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
    /api/subreddit/
    /api/user/
    /api/user/
    /api/user/
    /api/subreddit//posts
    /api/post//comments/
    /api/post//comments/
    /api/post//comments/

    View Slide

  10. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
    What changed
    then?

    View Slide

  11. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
    We added more
    and more of
    these

    View Slide

  12. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
    And forgot
    to add these

    View Slide

  13. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
    we are
    relationship-
    driven

    View Slide

  14. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
    and so is our
    data

    View Slide

  15. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
    under-fetching
    The process of being unable
    to fetch all data required in a
    single request.

    View Slide

  16. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
    over-fetching
    The process of getting
    unnecessary information when
    querying a API endpoint.

    View Slide

  17. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
    SELECT (name, joke) FROM
    presentation WHERE level > 1
    0 Rows returned

    View Slide

  18. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
    what

    View Slide

  19. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
    GraphQL is a query
    language for APIs and a
    runtime for fulfilling
    those queries with your
    existing data.

    View Slide

  20. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
    2012
    Dev at fb

    View Slide

  21. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
    2012
    Dev at fb

    View Slide

  22. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
    2012
    Dev at fb
    2015
    Open Source

    View Slide

  23. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
    2012
    Dev at fb
    2015
    Open Source

    View Slide

  24. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
    2012
    Dev at fb
    2015
    Open Source
    2018
    GraphQL Foundation

    View Slide

  25. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
    2012
    Dev at fb
    2015
    Open Source
    2018
    GraphQL Foundation

    View Slide

  26. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
    2012
    Dev at fb
    2015
    Open Source
    2018
    GraphQL Foundation
    Now
    Significant Adoption

    View Slide

  27. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
    GraphQL is a query
    language for APIs and a
    runtime for fulfilling
    those queries with your
    existing data.

    View Slide

  28. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Confidential

    View Slide

  29. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Confidential

    View Slide

  30. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Confidential

    View Slide

  31. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
    how

    View Slide

  32. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
    Schema Get Change Listen

    View Slide

  33. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
    Schema

    View Slide

  34. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
    type SubReddit{
    name: String!
    title: String!
    }

    View Slide

  35. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
    type SubReddit{
    name: String!
    title: String!
    }

    View Slide

  36. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
    type SubReddit{
    name: String!
    title: String!
    }

    View Slide

  37. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
    type SubReddit{
    name: String!
    title: String!
    }

    View Slide

  38. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
    type SubReddit{
    name: String!
    title: String!
    }

    View Slide

  39. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
    type SubReddit{
    name: String!
    title: String!
    }

    View Slide

  40. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
    type SubReddit{
    name: String!
    title: String!
    hotListings(limit: Int):[RedditLink]!
    }

    View Slide

  41. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
    type SubReddit{
    name: String!
    title: String!
    hotListings(limit: Int):[RedditLink]!
    }

    View Slide

  42. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
    type SubReddit{
    name: String!
    title: String!
    hotListings(limit: Int):[RedditLink]!
    }

    View Slide

  43. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
    type SubReddit{
    name: String!
    title: String!
    hotListings(limit: Int):[RedditLink]!
    }

    View Slide

  44. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
    Get

    View Slide

  45. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
    type SubRedditQueries{
    search(q: String): [SubReddit]
    getSubReddit(uuid: Id): SubReddit
    }

    View Slide

  46. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
    type SubRedditQueries{
    search(q: String): [SubReddit]
    getSubReddit(uuid: Id): SubReddit
    }

    View Slide

  47. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
    type SubRedditQueries{
    search(q: String): [SubReddit]
    getSubReddit(uuid: Id): SubReddit
    }

    View Slide

  48. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
    type SubRedditQueries{
    search(q: String): [SubReddit]
    getSubReddit(uuid: Id): SubReddit
    }

    View Slide

  49. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
    example

    View Slide

  50. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
    Change

    View Slide

  51. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
    type SubredditMutations{
    addLike(num: Int): SubReddit
    }

    View Slide

  52. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
    type SubredditMutations{
    addLike(num: Int): SubReddit
    }

    View Slide

  53. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
    addLike(num: 1) {
    name
    title
    }

    View Slide

  54. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
    Listen

    View Slide

  55. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
    type SubredditSubscriptions {
    onSubscriber(name: str): Subscriber
    }

    View Slide

  56. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
    {
    “id”: “…”
    “name”: “…”
    }
    {
    “id”: “…”
    “name”: “…”
    }

    View Slide

  57. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
    Still … how?

    View Slide

  58. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
    schema {
    query: SubRedditQueries
    mutation: SubredditMutations
    subscription: SubredditSubscriptions
    }

    View Slide

  59. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
    type SubRedditQueries{
    getSubReddit(uuid: Id): SubReddit
    }

    View Slide

  60. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
    type SubRedditQueries{
    getSubReddit(uuid: Id): SubReddit
    }

    View Slide

  61. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
    type SubRedditQueries{
    getSubReddit(uuid: Id): SubReddit
    }
    SubRedditResolver

    View Slide

  62. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
    type SubRedditQueries{
    getSubReddit(uuid: Id): SubReddit
    }
    type SubReddit{
    name: String!
    title: String!
    hotListings(limit: Int):[RedditLink]!
    }
    SubRedditResolver

    View Slide

  63. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
    type SubRedditQueries{
    getSubReddit(uuid: Id): SubReddit
    }
    type SubReddit{
    name: String!
    title: String!
    hotListings(limit: Int):[RedditLink]!
    }
    SubRedditResolver
    RedditLinkResolver

    View Slide

  64. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
    why

    View Slide

  65. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
    why not

    View Slide

  66. View Slide

  67. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
    • List of GraphQL APIs: https://github.com/APIs-guru/graphql-apis
    • Online Playground for GraphQL:
    https://www.graphqlhub.com/playground
    • Step-by-Step Guide on GraphQL: https://www.howtographql.com/
    Useful Resources

    View Slide