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

GraphQL & Ember

Chris Ball
February 21, 2018

GraphQL & Ember

A presentation at the Boston Ember group going over GraphQL and how to integrate it into your app.

Chris Ball

February 21, 2018
Tweet

More Decks by Chris Ball

Other Decks in Programming

Transcript

  1. Chris Ball
    cball_

    View full-size slide

  2. These are all tools to
    build apps.

    View full-size slide

  3. You are not your tools.

    View full-size slide

  4. What is GraphQL?

    View full-size slide

  5. A specification that
    enforces a schema.

    View full-size slide

  6. The schema validates

    client requests.

    View full-size slide

  7. An application layer.

    View full-size slide

  8. Gives power to

    the client.

    View full-size slide

  9. Here’s a schema.

    View full-size slide

  10. 2 Special Schema Types.

    View full-size slide

  11. GraphQL
    Advantages

    View full-size slide

  12. Advantages
    ★ No more “hey can you make this endpoint

    return this now?” discussions
    ★ Reduce number of requests
    ★ Smaller payloads (return only what you need)
    ★ camelCase conventions
    ★ Client determines shape of response
    ★ Subscriptions / websockets built in

    View full-size slide

  13. Advantages
    ★ “Wrap” an existing REST API
    ★ Schema Stitching to combine multiple GQL APIs as one
    ★ No more thinking about requests/responses
    ★ Tooling: GraphiQL is amazing
    ★ Introspection: Client can send query to get the schema
    ★ Fragments

    View full-size slide

  14. GraphiQL & Introspection

    View full-size slide

  15. Ok, how can I use
    this in Ember?

    View full-size slide

  16. I was going to show examples using

    View full-size slide

  17. Configure Apollo

    View full-size slide

  18. Do some queries

    View full-size slide

  19. How do I fetch a different org?

    View full-size slide

  20. Cool story. How do you query 

    for multiple items?

    View full-size slide

  21. Do a mutation

    View full-size slide

  22. Subscriptions

    are also a thing.

    View full-size slide

  23. What about Tests /
    Mocking / Mirage?

    View full-size slide

  24. https://github.com/bgentry/ember-apollo-client/blob/master/tests/helpers/start-pretender.js
    https://www.apollographql.com/docs/link/links/schema.html#Mocking

    View full-size slide

  25. Different Folder
    Structure?

    View full-size slide

  26. https://github.com/bgentry/ember-apollo-client/blob/master/tests/helpers/start-pretender.js
    https://www.apollographql.com/docs/link/links/schema.html#Mocking

    View full-size slide

  27. https://github.com/bgentry/ember-apollo-client
    http://graphql.org/learn/
    https://www.apollographql.com/docs
    http://graphql.org/blog/rest-api-graphql-wrapper/
    https://www.howtographql.com/ember-apollo

    View full-size slide