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

GraphQL 101

GraphQL 101

An introduction to GraphQL

Presented at WebDevTalks meetup in May 3rd

Fernando Perales

May 03, 2017
Tweet

More Decks by Fernando Perales

Other Decks in Programming

Transcript

  1. Who is that GraphQL all my friends
    are talking about?
    #WebDevTalks
    @FerPeralesM
    GraphQL 101

    View Slide


  2. #WebDevTalks
    @FerPeralesM

    View Slide

  3. #WebDevTalks
    @FerPeralesM
    Software Engineer
    Former MagmaLabs / FreeAgent Software
    FLOSS advocate
    Heavy Metal and Beer lover
    Host the RubyGDL community
    Founder @ elbuencodigo.com
    In Gregory Sallust I trust

    View Slide


  4. #WebDevTalks
    @FerPeralesM

    View Slide

  5. #WebDevTalks
    @FerPeralesM
    What is GraphQL?

    View Slide

  6. #WebDevTalks
    @FerPeralesM

    2012

    View Slide

  7. #WebDevTalks
    @FerPeralesM
    REST

    View Slide

  8. #WebDevTalks
    @FerPeralesM
    Spotify

    View Slide

  9. #WebDevTalks
    @FerPeralesM
    Goal: get the name of all the tracks
    from a playlist called “Starred”
    created by an specific user

    View Slide

  10. #WebDevTalks
    @FerPeralesM

    View Slide

  11. #WebDevTalks
    @FerPeralesM

    View Slide

  12. #WebDevTalks
    @FerPeralesM

    View Slide

  13. #WebDevTalks
    @FerPeralesM

    View Slide

  14. #WebDevTalks
    @FerPeralesM

    View Slide

  15. #WebDevTalks
    @FerPeralesM

    View Slide

  16. #WebDevTalks
    @FerPeralesM

    View Slide

  17. #WebDevTalks
    @FerPeralesM

    View Slide

  18. #WebDevTalks
    @FerPeralesM

    View Slide

  19. #WebDevTalks
    @FerPeralesM

    View Slide

  20. #WebDevTalks
    @FerPeralesM

    View Slide

  21. #WebDevTalks
    @FerPeralesM

    View Slide

  22. #WebDevTalks
    @FerPeralesM

    View Slide

  23. #WebDevTalks
    @FerPeralesM

    View Slide

  24. #WebDevTalks
    @FerPeralesM

    View Slide

  25. #WebDevTalks
    @FerPeralesM
    Success!

    View Slide

  26. #WebDevTalks
    @FerPeralesM
    We only needed

    View Slide

  27. #WebDevTalks
    @FerPeralesM
    3 HTTP calls

    View Slide

  28. #WebDevTalks
    @FerPeralesM
    Do an intensive operation in our
    backend (searching for the playlist
    with the “Starred” name)

    View Slide

  29. #WebDevTalks
    @FerPeralesM
    And getting three big payloads with
    unnecessary data*
    *for our needs

    View Slide

  30. #WebDevTalks
    @FerPeralesM

    View Slide

  31. #WebDevTalks
    @FerPeralesM
    GraphQL is, as the name might
    suggest, a query language

    View Slide

  32. #WebDevTalks
    @FerPeralesM
    Advantages

    View Slide

  33. #WebDevTalks
    @FerPeralesM
    Get exactly what you want

    View Slide

  34. #WebDevTalks
    @FerPeralesM

    View Slide

  35. #WebDevTalks
    @FerPeralesM
    Nesting

    View Slide

  36. #WebDevTalks
    @FerPeralesM

    View Slide

  37. #WebDevTalks
    @FerPeralesM

    View Slide

  38. #WebDevTalks
    @FerPeralesM
    Strongly typed

    View Slide

  39. #WebDevTalks
    @FerPeralesM
    Introspective

    View Slide

  40. #WebDevTalks
    @FerPeralesM

    View Slide

  41. #WebDevTalks
    @FerPeralesM
    No versioning

    View Slide

  42. Demo
    #WebDevTalks
    @FerPeralesM

    View Slide

  43. FerPerales/graphql_demo
    #WebDevTalks
    @FerPeralesM

    View Slide

  44. ferperales/graphql-101
    #WebDevTalks
    @FerPeralesM

    View Slide

  45. Fuentes
    #WebDevTalks
    @FerPeralesM
    https://medium.freecodecamp.com/so-whats-this-graphql-thing-i-keep-hearing-about-baf4d36c20cf
    http://blog.codeship.com/an-introduction-to-graphql-via-the-github-api
    http://facebook.github.io/graphql/
    http://thenewstack.io/graphql-data-query-language-resource-guide
    http://medium.freecodecamp.com/give-it-a-rest-use-graphql-for-your-apis-40a2761e6336
    http://dev.to/reactiveconf/why-i-believe-graphql-will-come-to-replace-rest

    View Slide

  46. ¡Gracias!
    #WebDevTalks
    @FerPeralesM

    View Slide