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.

Arnelle Balane

February 22, 2020
Tweet

More Decks by Arnelle Balane

Other Decks in Technology

Transcript

  1. 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
  2. query { post(id: 1) { id content comments { content

    } } } { "data": { "post": { "id": "abc123", "content": "Hello GraphQL!", "comments": [{ "content": "Hey!" }, { "content": "Yoooo!" }] } } }
  3. 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
  4. 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
  5. 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
  6. type Query { posts: [Post] post(id: ID!): Post } type

    Post { id: ID! content: String comments: [Comment] } type Comment { id: ID! content: String }
  7. 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
  8. 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
  9. 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
  10. 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
  11. Add a new mutation for creating a new comment for

    a given post using a given user
  12. • Apollo Client • Relay • … and many more

    Server libraries/services graphql.org/code • Apollo Server • Express GraphQL • Hasura Client libraries
  13. 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