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

Introduction to GraphQL

Introduction to GraphQL

Talk given during Facebook Developers Circles Cebu City community launch event.

This talk covers how GraphQL works, discussing queries and mutations, schemas, and using them in our apps using Apollo.

32c638e7a3a466d182705fb4370cbb2e?s=128

Arnelle Balane

February 22, 2020
Tweet

More Decks by Arnelle Balane

Other Decks in Technology

Transcript

  1. Introduction to GraphQL Software Developer, Newlogic @arnellebalane

  2. What is GraphQL?

  3. a query language for our APIs, and a runtime for

    fulfilling these queries
  4. a query language for our APIs, and a runtime for

    fulfilling these queries
  5. GraphQL is a query language It gives clients the ability

    to ask for the exact data that they need, and nothing more runtime It provides a complete and understandable description of the data available in the API, and defines how to get those data
  6. query { post(id: 1) { id content comments { content

    } } } { "data": { "post": { "id": "abc123", "content": "Hello GraphQL!", "comments": [{ "content": "Hey!" }, { "content": "Yoooo!" }] } } }
  7. it’s just a new way to send data over HTTP

  8. it’s just a new way to send data over HTTP

    ( ehem... REST )
  9. GraphQL vs REST ( part one )

  10. Both have the idea of a resource, which is the

    piece of data in our API. Usually these resources have their own IDs They’re similar! Both can fetch resources via HTTP with a URL Both can return a JSON representation of the resource being fetched
  11. REST But also different! GraphQL The server determines what fields

    are returned to the client when fetching a resource The server returns only the fields that were queried by the client
  12. The available resources are described in a “schema” • A

    schema is a typed representation of the resources, their fields, and their relationships with each other Each resource is identified by a URL REST But also different! GraphQL example.com/api/posts example.com/api/posts/1 example.com/api/posts/1/comments
  13. type Query { posts: [Post] post(id: ID!): Post } type

    Post { id: ID! content: String comments: [Comment] } type Comment { id: ID! content: String }
  14. Both need to differentiate if the request is meant to

    read or write data They’re similar! Both provide a way to interact with our API data
  15. REST But also different! Interact with API data using a

    list of available root queries • “Which query should I use?” Interact with API data using a list of available endpoints • “Which endpoint should I use?” GraphQL
  16. REST But also different! Interact with API data using a

    list of available root queries • “Which query should I use?” Interact with API data using a list of available endpoints • “Which endpoint should I use?” GraphQL Use HTTP methods (i.e. GET, POST, etc.) to differentiate read/write operations Use query to read data, use mutation to write data
  17. They’re similar! Both eventually call a function in the server

    when a request is received
  18. Route handlers are called when requests are received REST But

    also different! GraphQL app.get('/books/:id', (req, res) => { res.json(book); }) Resolver functions are called corresponding to the fields requested • Each field in the GraphQL schema has a corresponding “resolver” function which returns the value for that field Each request can call multiple field resolvers from different resources
  19. GraphQL syntax

  20. bit.ly/graphql-playground graphql.org/learn/queries

  21. Queries • Fields • Arguments • Aliases Summary Mutations Subscriptions

    • Fragments • Variables • Operation Names
  22. Get the content, number of likes, and author email for

    posts with ID of 1 and 3
  23. Add yourself as a new user, then create a new

    post as that user
  24. Subscribe to the latest posts, showing their content and creation

    date
  25. GraphQL schema and resolvers

  26. bit.ly/fdc-graphql-workshop graphql.org/learn/schema

  27. Add a new root query field that will return all

    users
  28. Add a new mutation for creating a new comment for

    a given post using a given user
  29. GraphQL in our apps

  30. • Apollo Client • Relay • … and many more

    Server libraries/services graphql.org/code • Apollo Server • Express GraphQL • Hasura Client libraries
  31. bit.ly/fdc-apollo-react apollographql.com/docs/react/get-started/

  32. GraphQL vs REST ( part two )

  33. REST is years ahead of GraphQL Tools and integrations, e.g.

    for monitoring, alerting, logging, etc. Versioning, authentication, authorization, file uploads, caching, etc. GraphQL requests can’t be cached as easily as REST requests
  34. GraphQL Introspection GraphQL Subscriptions Apollo Graph Manager

  35. Should you use GraphQL?

  36. Thank you! Software Developer, Newlogic @arnellebalane