graphql - amazon web services · graphql is a query language & alternative to rest +...

65
GRAPHQL & beyond @felipesoares_

Upload: others

Post on 23-May-2020

12 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: GRAPHQL - Amazon Web Services · GraphQL is a query language & alternative to REST + graphs-> nodes-> edges. query language SELECT * FROM . type House {edge: Person} type Person {

GRAPHQL & beyond

@felipesoares_

Page 2: GRAPHQL - Amazon Web Services · GraphQL is a query language & alternative to REST + graphs-> nodes-> edges. query language SELECT * FROM . type House {edge: Person} type Person {

why how when

Page 3: GRAPHQL - Amazon Web Services · GraphQL is a query language & alternative to REST + graphs-> nodes-> edges. query language SELECT * FROM . type House {edge: Person} type Person {

@felipesoares6_

felipesoares6

Page 4: GRAPHQL - Amazon Web Services · GraphQL is a query language & alternative to REST + graphs-> nodes-> edges. query language SELECT * FROM . type House {edge: Person} type Person {
Page 5: GRAPHQL - Amazon Web Services · GraphQL is a query language & alternative to REST + graphs-> nodes-> edges. query language SELECT * FROM . type House {edge: Person} type Person {
Page 6: GRAPHQL - Amazon Web Services · GraphQL is a query language & alternative to REST + graphs-> nodes-> edges. query language SELECT * FROM . type House {edge: Person} type Person {
Page 7: GRAPHQL - Amazon Web Services · GraphQL is a query language & alternative to REST + graphs-> nodes-> edges. query language SELECT * FROM . type House {edge: Person} type Person {
Page 8: GRAPHQL - Amazon Web Services · GraphQL is a query language & alternative to REST + graphs-> nodes-> edges. query language SELECT * FROM . type House {edge: Person} type Person {

GraphQL is a query language

Page 9: GRAPHQL - Amazon Web Services · GraphQL is a query language & alternative to REST + graphs-> nodes-> edges. query language SELECT * FROM . type House {edge: Person} type Person {

& alternative to REST

Page 10: GRAPHQL - Amazon Web Services · GraphQL is a query language & alternative to REST + graphs-> nodes-> edges. query language SELECT * FROM . type House {edge: Person} type Person {
Page 11: GRAPHQL - Amazon Web Services · GraphQL is a query language & alternative to REST + graphs-> nodes-> edges. query language SELECT * FROM . type House {edge: Person} type Person {

+

Page 12: GRAPHQL - Amazon Web Services · GraphQL is a query language & alternative to REST + graphs-> nodes-> edges. query language SELECT * FROM . type House {edge: Person} type Person {

graphs

-> nodes

-> edges

Page 13: GRAPHQL - Amazon Web Services · GraphQL is a query language & alternative to REST + graphs-> nodes-> edges. query language SELECT * FROM . type House {edge: Person} type Person {

query language

SELECT *

FROM

Page 14: GRAPHQL - Amazon Web Services · GraphQL is a query language & alternative to REST + graphs-> nodes-> edges. query language SELECT * FROM . type House {edge: Person} type Person {

type House {edge: Person

}

type Person {...

}

Page 15: GRAPHQL - Amazon Web Services · GraphQL is a query language & alternative to REST + graphs-> nodes-> edges. query language SELECT * FROM . type House {edge: Person} type Person {

why?

Page 16: GRAPHQL - Amazon Web Services · GraphQL is a query language & alternative to REST + graphs-> nodes-> edges. query language SELECT * FROM . type House {edge: Person} type Person {
Page 17: GRAPHQL - Amazon Web Services · GraphQL is a query language & alternative to REST + graphs-> nodes-> edges. query language SELECT * FROM . type House {edge: Person} type Person {

3 reasons

Page 18: GRAPHQL - Amazon Web Services · GraphQL is a query language & alternative to REST + graphs-> nodes-> edges. query language SELECT * FROM . type House {edge: Person} type Person {

get just what you want

Page 19: GRAPHQL - Amazon Web Services · GraphQL is a query language & alternative to REST + graphs-> nodes-> edges. query language SELECT * FROM . type House {edge: Person} type Person {

enables declarative data fetching

Page 20: GRAPHQL - Amazon Web Services · GraphQL is a query language & alternative to REST + graphs-> nodes-> edges. query language SELECT * FROM . type House {edge: Person} type Person {

overfetching

Page 21: GRAPHQL - Amazon Web Services · GraphQL is a query language & alternative to REST + graphs-> nodes-> edges. query language SELECT * FROM . type House {edge: Person} type Person {

underfetching

Page 22: GRAPHQL - Amazon Web Services · GraphQL is a query language & alternative to REST + graphs-> nodes-> edges. query language SELECT * FROM . type House {edge: Person} type Person {

nice and smooth contracts

Page 23: GRAPHQL - Amazon Web Services · GraphQL is a query language & alternative to REST + graphs-> nodes-> edges. query language SELECT * FROM . type House {edge: Person} type Person {

+ typed schemas+ docs

Page 24: GRAPHQL - Amazon Web Services · GraphQL is a query language & alternative to REST + graphs-> nodes-> edges. query language SELECT * FROM . type House {edge: Person} type Person {

playground

Page 25: GRAPHQL - Amazon Web Services · GraphQL is a query language & alternative to REST + graphs-> nodes-> edges. query language SELECT * FROM . type House {edge: Person} type Person {

clients everywhere

Page 26: GRAPHQL - Amazon Web Services · GraphQL is a query language & alternative to REST + graphs-> nodes-> edges. query language SELECT * FROM . type House {edge: Person} type Person {

only exposes a single endpoint

Page 27: GRAPHQL - Amazon Web Services · GraphQL is a query language & alternative to REST + graphs-> nodes-> edges. query language SELECT * FROM . type House {edge: Person} type Person {

consume the same endpoint in != ways

Page 28: GRAPHQL - Amazon Web Services · GraphQL is a query language & alternative to REST + graphs-> nodes-> edges. query language SELECT * FROM . type House {edge: Person} type Person {

how?

Page 29: GRAPHQL - Amazon Web Services · GraphQL is a query language & alternative to REST + graphs-> nodes-> edges. query language SELECT * FROM . type House {edge: Person} type Person {

-> schema-> queries-> mutations

-> resolvers-> responses

Page 30: GRAPHQL - Amazon Web Services · GraphQL is a query language & alternative to REST + graphs-> nodes-> edges. query language SELECT * FROM . type House {edge: Person} type Person {

schema

Page 31: GRAPHQL - Amazon Web Services · GraphQL is a query language & alternative to REST + graphs-> nodes-> edges. query language SELECT * FROM . type House {edge: Person} type Person {

type Query {users: [User!]!,user: User!

}

Page 32: GRAPHQL - Amazon Web Services · GraphQL is a query language & alternative to REST + graphs-> nodes-> edges. query language SELECT * FROM . type House {edge: Person} type Person {

type User {id: ID!,name: String,email: String

}

Page 33: GRAPHQL - Amazon Web Services · GraphQL is a query language & alternative to REST + graphs-> nodes-> edges. query language SELECT * FROM . type House {edge: Person} type Person {

schema-> queries-> mutations

resolversresponses

Page 34: GRAPHQL - Amazon Web Services · GraphQL is a query language & alternative to REST + graphs-> nodes-> edges. query language SELECT * FROM . type House {edge: Person} type Person {

queries

Page 35: GRAPHQL - Amazon Web Services · GraphQL is a query language & alternative to REST + graphs-> nodes-> edges. query language SELECT * FROM . type House {edge: Person} type Person {

GET /users

query {users {

id,name,email

}}

Page 36: GRAPHQL - Amazon Web Services · GraphQL is a query language & alternative to REST + graphs-> nodes-> edges. query language SELECT * FROM . type House {edge: Person} type Person {

mutations

Page 37: GRAPHQL - Amazon Web Services · GraphQL is a query language & alternative to REST + graphs-> nodes-> edges. query language SELECT * FROM . type House {edge: Person} type Person {

POST /users

mutation {createUser(

name: “Felipeson”,email: “[email protected]

) {id

}}

Page 38: GRAPHQL - Amazon Web Services · GraphQL is a query language & alternative to REST + graphs-> nodes-> edges. query language SELECT * FROM . type House {edge: Person} type Person {

schemaqueriesmutations

-> resolvers responses

Page 39: GRAPHQL - Amazon Web Services · GraphQL is a query language & alternative to REST + graphs-> nodes-> edges. query language SELECT * FROM . type House {edge: Person} type Person {

resolvers

Page 40: GRAPHQL - Amazon Web Services · GraphQL is a query language & alternative to REST + graphs-> nodes-> edges. query language SELECT * FROM . type House {edge: Person} type Person {

field :users doresolve -> (users) { User.all }

end

field :user doresolve -> (_, args) { User.find(args[:id]) }

end

???: { ‘api.com/top’ }

Page 41: GRAPHQL - Amazon Web Services · GraphQL is a query language & alternative to REST + graphs-> nodes-> edges. query language SELECT * FROM . type House {edge: Person} type Person {

schemaqueriesmutations

resolvers-> responses

Page 42: GRAPHQL - Amazon Web Services · GraphQL is a query language & alternative to REST + graphs-> nodes-> edges. query language SELECT * FROM . type House {edge: Person} type Person {

responses

Page 43: GRAPHQL - Amazon Web Services · GraphQL is a query language & alternative to REST + graphs-> nodes-> edges. query language SELECT * FROM . type House {edge: Person} type Person {

loading

Page 44: GRAPHQL - Amazon Web Services · GraphQL is a query language & alternative to REST + graphs-> nodes-> edges. query language SELECT * FROM . type House {edge: Person} type Person {

“data”: {users: [

{id: “1”,name: “Felipe Soares”,email: “[email protected]

}]

}

query {users {

id,name,email

}}

Page 45: GRAPHQL - Amazon Web Services · GraphQL is a query language & alternative to REST + graphs-> nodes-> edges. query language SELECT * FROM . type House {edge: Person} type Person {

“errors”: [{

“message”: “error”,“location”: … ,“fields”: ...

}]

query {users {

id,name,gender

}}

Page 46: GRAPHQL - Amazon Web Services · GraphQL is a query language & alternative to REST + graphs-> nodes-> edges. query language SELECT * FROM . type House {edge: Person} type Person {

how how

Page 47: GRAPHQL - Amazon Web Services · GraphQL is a query language & alternative to REST + graphs-> nodes-> edges. query language SELECT * FROM . type House {edge: Person} type Person {

server-side

bit.ly/2FQPwRG

Page 48: GRAPHQL - Amazon Web Services · GraphQL is a query language & alternative to REST + graphs-> nodes-> edges. query language SELECT * FROM . type House {edge: Person} type Person {

gem ‘graphql’

Page 49: GRAPHQL - Amazon Web Services · GraphQL is a query language & alternative to REST + graphs-> nodes-> edges. query language SELECT * FROM . type House {edge: Person} type Person {

Root = GraphQL::Schema.define do mutation(Types::MutationType) query(Types::QueryType)end

Page 50: GRAPHQL - Amazon Web Services · GraphQL is a query language & alternative to REST + graphs-> nodes-> edges. query language SELECT * FROM . type House {edge: Person} type Person {

Types::QueryType = GraphQL::ObjectType.define

do name 'Query'

…end

Page 51: GRAPHQL - Amazon Web Services · GraphQL is a query language & alternative to REST + graphs-> nodes-> edges. query language SELECT * FROM . type House {edge: Person} type Person {

field :users, !types[Types::UserType] do resolve ->(_obj, _args, _ctx) { User.all }end

Page 52: GRAPHQL - Amazon Web Services · GraphQL is a query language & alternative to REST + graphs-> nodes-> edges. query language SELECT * FROM . type House {edge: Person} type Person {

client-side

bit.ly/2zRBNUq

Page 53: GRAPHQL - Amazon Web Services · GraphQL is a query language & alternative to REST + graphs-> nodes-> edges. query language SELECT * FROM . type House {edge: Person} type Person {

apollo

Page 54: GRAPHQL - Amazon Web Services · GraphQL is a query language & alternative to REST + graphs-> nodes-> edges. query language SELECT * FROM . type House {edge: Person} type Person {

query

Page 55: GRAPHQL - Amazon Web Services · GraphQL is a query language & alternative to REST + graphs-> nodes-> edges. query language SELECT * FROM . type House {edge: Person} type Person {

import gql from ‘graphql-tag’

import { Query } from ‘react-apollo’

Page 56: GRAPHQL - Amazon Web Services · GraphQL is a query language & alternative to REST + graphs-> nodes-> edges. query language SELECT * FROM . type House {edge: Person} type Person {

const GET_USERS = gql`query {

users {id,name,email

}}`

Page 57: GRAPHQL - Amazon Web Services · GraphQL is a query language & alternative to REST + graphs-> nodes-> edges. query language SELECT * FROM . type House {edge: Person} type Person {

const GET_USERS = gql`query {

users {id,name,email

}}`

Page 58: GRAPHQL - Amazon Web Services · GraphQL is a query language & alternative to REST + graphs-> nodes-> edges. query language SELECT * FROM . type House {edge: Person} type Person {

<Query query={GET_USERS}> {({ load, error, data }) => {

...}

</Query>

Page 59: GRAPHQL - Amazon Web Services · GraphQL is a query language & alternative to REST + graphs-> nodes-> edges. query language SELECT * FROM . type House {edge: Person} type Person {

when?

Page 60: GRAPHQL - Amazon Web Services · GraphQL is a query language & alternative to REST + graphs-> nodes-> edges. query language SELECT * FROM . type House {edge: Person} type Person {

is difficult to close the API contracts

Page 61: GRAPHQL - Amazon Web Services · GraphQL is a query language & alternative to REST + graphs-> nodes-> edges. query language SELECT * FROM . type House {edge: Person} type Person {

overfetching

underfetching

Page 62: GRAPHQL - Amazon Web Services · GraphQL is a query language & alternative to REST + graphs-> nodes-> edges. query language SELECT * FROM . type House {edge: Person} type Person {

consume the same endpoint in != ways

Page 63: GRAPHQL - Amazon Web Services · GraphQL is a query language & alternative to REST + graphs-> nodes-> edges. query language SELECT * FROM . type House {edge: Person} type Person {

consuming != APIs

Page 64: GRAPHQL - Amazon Web Services · GraphQL is a query language & alternative to REST + graphs-> nodes-> edges. query language SELECT * FROM . type House {edge: Person} type Person {

learn something new!

Page 65: GRAPHQL - Amazon Web Services · GraphQL is a query language & alternative to REST + graphs-> nodes-> edges. query language SELECT * FROM . type House {edge: Person} type Person {

thanks!@felipesoares6_

felipesoares6

bit.ly/2FQPwRG bit.ly/2zRBNUqclient-side server-side