Intro to GraphQL

@shahidh_k Intro to GraphQL Shahidh K Muhammed hasura.io

@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

@shahidh_k Facebook rewrite - React, GraphQL, Relay

@shahidh_k GraphQL

@shahidh_k An API call

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

@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

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

@shahidh_k An API call (before) username Street City username City
Show less data on mobile

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

@shahidh_k An API call (after )

@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

@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

@shahidh_k query { user (id: 1) { id name address
{ street } } }

@shahidh_k

@shahidh_k Parameterising your API call

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

@shahidh_k Parameters to your API (after ) Your API calls
will have parameters. query { user (id: 1) { id name } } Any ﬁeld in your query can take arguments in ()

@shahidh_k Parameters to your API (after ) How do we
send arguments programmatically? String templating is yuck!

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

@shahidh_k Parameters to your API (after )

@shahidh_k “Write” APIs

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

@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

@shahidh_k “Realtime” APIs Backend order object

@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

@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, }

@shahidh_k Sharing/documenting APIs

@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

@shahidh_k Sharing/documenting APIs (after ) API developer builds API You
start integrating the API

@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 }

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

@shahidh_k Less talk - more action Demo!

@shahidh_k Stickers and Tshirt

Intro to GraphQL

Intro to GraphQL

More Decks by Shahidh K Muhammed

Other Decks in Technology

Featured

Transcript