Intro to GraphQL Workshop

Presented on 10 Jan 2021.

Transcript

1. Intro to GraphQL Workshop 10 Jan 2021
2. Michael Cheng Lead Software Engineer, GovTech @CoderKungfu
3. Why is GraphQL?
4. Why GraphQL? • GraphQL is a RESTful API. • You only use HTTP POST to send data. • Request body can be a Form Data or JSON. • You still need to take care of Authentication, Authorisation and SSL/TLS on your application server.
5. What is RESTful API?
6. REST API • Representational state transfer. • 4 components of a REST API: ◦ The endpoint ◦ The method ◦ The headers ◦ The data (or body) • CRUD operations on Resources. • Reference: https://www.smashingmagazine.com/2018/01/understanding-using-rest-api/
7. https://www.edureka.co/blog/what-is-rest-api/
8. https://phpenthusiast.com/blog/what-is-rest-api
9. Examples GET https://example.com/api/events GET https://example.com/api/event/123456 POST https://example.com/api/events { "event": { "name":"GraphQL Workshop", "date":"2021-01-09 14:00 +08:00" ... }
10. Yet Another REST API
11. GraphQL as a REST API • 4 components of a REST API: ◦ The endpoint: https://example.com/graphql ◦ The method: POST ◦ The headers: <depends on your application> ◦ The data (or body): JSON / Form Data ▪ query ▪ variables ▪ operationName
12. Hands On: Using a GraphQL client • We will be using a GraphQL client to see how we can interactively make requests to a GraphQL service. • https://graphql.org/swapi-graphql • Tasks: ◦ Compose a GraphQL request query. ◦ Use the interactive documentation to find out what you can request. ◦ Experience the build in validation.
13. Benefits
14. Benefits • Only request as much data as you need. • Smaller size payload. • Single endpoint. Can use POST or GET. • Documentation through a Schema doc. • Strongly typed data.
15. GraphQL Schema Basics
16. GraphQL Basics • Schemas and Types ◦ Default scalar types ▪ Int: A signed 32‐bit integer. ▪ Float: A signed double-precision floating-point value. ▪ String: A UTF‐8 character sequence. ▪ Boolean: true or false. ▪ ID: The ID scalar type represents a unique identifier. ▪ Enum: Enumeration of constants. ◦ You can declare your own types.
17. GraphQL Basics • Other types: ◦ Lists: [ String ] ◦ Non-null values: String! ◦ Input types
18. Hands On: Let's build our own GraphQL Schema • You are building a database for a Library. • A library has many books • Book has ISBN • Book has publish date • Book has many authors • Book has many categories
19. Example Schema The "Query" type is special: it lists all of the available queries that clients can execute, along with the return type for each. In this case, the "books" query returns an array of zero or more Books (defined above).
20. Let's Build a GraphQL Client
21. Hands On: Let's build a GraphQL Client in React • We will build a simple React app that shows all the movies in the Star Wars franchise. We will be using the Star Wars API. • Instructions: https://github.com/CoderKungfu/graphql-workshop • Using CodeSandbox: https://codesandbox.io
22. Let's Build a GraphQL Server
23. Hands On: Let's build a GraphQL Server • We will be using the Apollo GraphQL library to build our own GraphQL Server. • Apollo Server needs to know how to populate data for every field in your schema so that it can respond to requests for that data. To accomplish this, it uses resolvers. • Instructions: https://github.com/CoderKungfu/graphql-workshop • Using CodeSandbox: https://codesandbox.io
24. Questions?
25. Final Notes • Join our Telegram Group: ◦ http://bit.ly/techsavvy-telegram