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

Intro to GraphQL Workshop

Intro to GraphQL Workshop

Presented on 10 Jan 2021.

Michael Cheng

January 10, 2021
Tweet

More Decks by Michael Cheng

Other Decks in Technology

Transcript

  1. Intro to GraphQL Workshop
    10 Jan 2021

    View full-size slide

  2. Michael Cheng
    Lead Software Engineer, GovTech
    @CoderKungfu

    View full-size slide

  3. Why is GraphQL?

    View full-size slide

  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.

    View full-size slide

  5. What is RESTful API?

    View full-size slide

  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/

    View full-size slide

  7. https://www.edureka.co/blog/what-is-rest-api/

    View full-size slide

  8. https://phpenthusiast.com/blog/what-is-rest-api

    View full-size slide

  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"
    ...
    }

    View full-size slide

  10. Yet Another REST API

    View full-size slide

  11. GraphQL as a REST API
    ● 4 components of a REST API:
    ○ The endpoint: https://example.com/graphql
    ○ The method: POST
    ○ The headers:
    ○ The data (or body): JSON / Form Data
    ■ query
    ■ variables
    ■ operationName

    View full-size slide

  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.

    View full-size slide

  13. 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.

    View full-size slide

  14. GraphQL Schema Basics

    View full-size slide

  15. 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.

    View full-size slide

  16. GraphQL Basics
    ● Other types:
    ○ Lists: [ String ]
    ○ Non-null values: String!
    ○ Input types

    View full-size slide

  17. 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

    View full-size slide

  18. 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).

    View full-size slide

  19. Let's Build a GraphQL Client

    View full-size slide

  20. 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

    View full-size slide

  21. Let's Build a GraphQL Server

    View full-size slide

  22. 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

    View full-size slide

  23. Final Notes
    ● Join our Telegram Group:
    ○ http://bit.ly/techsavvy-telegram

    View full-size slide