Exploring GraphQL

Exploring GraphQL Marc-André Giroux @__xuorig__

@__xuorig__ REST APIs are Great.

@__xuorig__ Except when they're not.

@__xuorig__ Multiple round-trips are not ideal.

@__xuorig__ GET /people/1 GET /planet/2 GET /ﬁlm/3

@__xuorig__ SELECT * FROM /ENDPOINT

@__xuorig__ GET /people/1 { "person": { "name": "luke" } }

@__xuorig__ { "name": "Luke Skywalker", "height": "172", "mass": "77", "hair_color":
"blond", "skin_color": "fair", "eye_color": "blue", "birth_year": "19BBY", "gender": "male", "homeworld": "http://swapi.co/api/ planets/1/", "films": [ "http://swapi.co/api/films/6/", "http://swapi.co/api/films/3/", "http://swapi.co/api/films/2/", "http://swapi.co/api/films/1/", "http://swapi.co/api/films/7/" ],

@__xuorig__ What do clients even use?

@__xuorig__ { "name": "Luke Skywalker", "height": "172", "mass": "77", "hair_color":
"blond", "skin_color": "fair", "eye_color": "blue", "birth_year": "19BBY", "gender": "male", "homeworld": "http://swapi.co/api/ planets/1/", "films": [ "http://swapi.co/api/films/6/", "http://swapi.co/api/films/3/", "http://swapi.co/api/films/2/", "http://swapi.co/api/films/1/", "http://swapi.co/api/films/7/" ],

GraphQL

@__xuorig__ A special type of database.

@__xuorig__ A library.

@__xuorig__ A Query Langage.

@__xuorig__ &

@__xuorig__ A Spec for servers to execute GraphQL Queries.

@__xuorig__ A GraphQL Hello World.

@__xuorig__ query { film { title } }

@__xuorig__ Anatomy of a GraphQL Query

@__xuorig__ query MyQuery { film { title } }

@__xuorig__ query MyQuery { film { title } } Operation
Type

@__xuorig__ query MyQuery { film { title } } Operation
Name

@__xuorig__ query MyQuery { film { title } } Selection
Set

@__xuorig__ query MyQuery { film { title } } Field

@__xuorig__ • Lexed • Parsed • Validated • Executed

@__xuorig__ "data": { "film": { "title": "A New Hope" }
}

@__xuorig__ query { film(id: "123") { title } }

@__xuorig__ query { film(id: "123") { title characters { name
} } }

@__xuorig__ "data": { "film": { "title": "A New Hope", "characters":
[ { "name": "Luke Skywalker" }, { "name": "Princess Leia" } ] } }

@__xuorig__ The Type System.

@__xuorig__ { film(id: "123") { title characters { name }
} }

} } type QueryRoot { film(id: ID!): Film }

} } type Film { title: String! characters: [Character!]! }

} } type Character { name: String! }

@__xuorig__ Introspection.

@__xuorig__ { __schema { types { name } } }

@__xuorig__ { __type(name: "Film") { name description } }

@__xuorig__ Introspection == Clients with Super Powers

@__xuorig__ • AutoComplete • Client side validation • IDE Integration
• Code Generation

@__xuorig__ GraphiQL

@__xuorig__

@__xuorig__ swapi-graphql-ruby.herokuapp.com

Mutations

@__xuorig__ mutation { addFilm(name: "StarWars 8") { title } }

Fragments

@__xuorig__ query { film(id: "123") { title characters { name
} } bestRatedfilm { title characters { name } } }

@__xuorig__ fragment filmFragment on Film { title characters { name
} }

@__xuorig__ query { film(id: "123") { ...filmFragment } bestRatedfilm {
...filmFragment } } fragment filmFragment on Film { title characters { name } }

@__xuorig__ Versioning

@__xuorig__ Versioning Continuous Evolution

@__xuorig__ What about Security ?

@__xuorig__ • Maximum Depth • Query Complexity • Timeout

@__xuorig__ My HTTP Caching :( !

@__xuorig__ • Client Side Cache • Persisted Queries

@__xuorig__ GraphQL is Great.

@__xuorig__ A single roundtrip to fetch exactly what a client
needs.

@__xuorig__ Declarative and predictable. (no more SELECT *)

@__xuorig__ Servers express possibilities.

@__xuorig__ Clients deﬁne requirements.

@__xuorig__ That's real separation of concerns!

@__xuorig__ Great developer experience.

@__xuorig__ It makes us ship faster.

@__xuorig__ An everyone is happy.

Thank you! Marc-André Giroux @__xuorig__

Exploring GraphQL

Exploring GraphQL

More Decks by Marc-Andre Giroux

Other Decks in Programming

Featured

Transcript