$30 off During Our Annual Pro Sale. View Details »

Intro to GraphQL

Intro to GraphQL

A short intro to GraphQL and side-by-side comparisons with REST.

Shahidh K Muhammed

May 04, 2019
Tweet

More Decks by Shahidh K Muhammed

Other Decks in Technology

Transcript

  1. @shahidh_k Intro to GraphQL Shahidh K Muhammed hasura.io

  2. @shahidh_k I’m Shahidh (@shahidh_k) OSS at Hasura Design Engineer by

    training I design software for a living now :) github.com/hasura/graphql-engine
  3. @shahidh_k Facebook rewrite - React, GraphQL, Relay

  4. @shahidh_k GraphQL

  5. @shahidh_k An API call

  6. @shahidh_k An API call (before) API App HTTP request GET

    /api/user?id=1 HTTP response { "id": 1, "name": "Elmo" } GET /api/address?user_id=1 { "street": "Sesame street", "city": "New York City" }
  7. @shahidh_k An API call (before) Yuck! 2 API calls. It

    can only get worse with more API calls. username address Some data Some more data
  8. @shahidh_k An API call (before) Let’s talk to our API

    developer to help us out. With one API call. HTTP request GET /api/userinfo?id=1 HTTP response { "id": 1, "name": "Elmo" "address": { "street": "Sesame street", "city": "New York City" } }
  9. @shahidh_k An API call (before) username Street City username City

    Show less data on mobile
  10. @shahidh_k An API call (before) Let’s talk to our API

    developer to help us out. Again. With one API call that takes params HTTP request GET /api/userinfo?id=1&fields=id,name,address.city HTTP response { "id": 1, "name": "Elmo" "address": { "street": "Sesame street" } }
  11. @shahidh_k An API call (after )

  12. @shahidh_k Key insights #1 Your API models are “graph” like.

    User: Id Name Address: Street City Orders: Id Product Product: Id Name Photo Brand Brand: Id Name
  13. @shahidh_k Key insights #2 You want to control the data

    you get User: Id Name Address: Street City Orders: Id Product Product: Id Name Photo Brand Brand: Id Name
  14. @shahidh_k query { user (id: 1) { id name address

    { street } } }
  15. @shahidh_k

  16. @shahidh_k Parameterising your API call

  17. @shahidh_k Parameters to your API (before) Your API calls will

    have parameters. You will set these parameters programmatically. GET /api/user?id=1
  18. @shahidh_k Parameters to your API (after ) Your API calls

    will have parameters. query { user (id: 1) { id name } } Any field in your query can take arguments in ()
  19. @shahidh_k Parameters to your API (after ) How do we

    send arguments programmatically? String templating is yuck!
  20. @shahidh_k Parameters to your API (after ) A GraphQL server

    takes 2 things: 1. The GraphQL query 2. A variables object
  21. @shahidh_k Parameters to your API (after )

  22. @shahidh_k “Write” APIs

  23. @shahidh_k “Writing” to your API (before) - POST - PUT

    - DELETE - PATCH HTTP request POST /api/todo { "todo": "Grok GraphQL" } HTTP response 200 { "id": 987 }
  24. @shahidh_k “Writing” to your API (after ) HTTP request POST

    /graphql mutation { addTodo(todo: $newTodo) { id } } HTTP response 200 { "id": 987 } { "newTodo": { "todo": "Grok GraphQL" } } Query variable
  25. @shahidh_k “Realtime” APIs Backend order object

  26. @shahidh_k “Realtime” APIs (before) API App Option 1: Polling Client

    makes repeated requests every X seconds to refetch data. #yuck Option 2: Websockets Server pushes data to the client over websockets. #nightmare
  27. @shahidh_k “Realtime” APIs (after ) API App HTTP request ws://myapi.com/graphql

    subscription { order(id: "XX-57") { paid dispatched } } HTTP response { "paid": true, "dispatched": false, }
  28. @shahidh_k Sharing/documenting APIs

  29. @shahidh_k Sharing/documenting APIs (before) API developer builds API API developer

    writes documentation Google sheets Postman Swagger You read documentation You start integrating the API Docs are missing, out-of-date, plain wrong
  30. @shahidh_k Sharing/documenting APIs (after ) API developer builds API You

    start integrating the API
  31. @shahidh_k GraphQL schema: The type-system of your API User: Id

    Name Address: Street City Orders: Id Product Product: Id Name Photo Brand Brand: Id Name type User { id: Int name: String address: Address } type Address { id: Int street: String city: String }
  32. @shahidh_k Introspection API { __type(name: "todos") { name fields {

    name } } } Make a GraphQL query to fetch the type information! todos id created_at is_completed text user ...
  33. @shahidh_k Less talk - more action Demo!

  34. @shahidh_k Stickers and Tshirt