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.

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