GraphQL à Shopify

GraphQL @ Shopify Marc-André Giroux @__xuorig__

@__xuorig__ Les APIs REST sont

@__xuorig__ Sauf quand ils sont

@__xuorig__ Des allers-retours multiples... C'est pas idéal.

@__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__ Qu'est-ce que nos clients utilisent vraiment?

@__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__ Un type spécial de base de données.

@__xuorig__ Une librairie ou un framework

@__xuorig__ Pas spéciﬁque à un langage.

@__xuorig__ Langage de requête

@__xuorig__ &

@__xuorig__ Une Speciﬁcation.

@__xuorig__ Un "Hello World" GraphQL

@__xuorig__ query { film { title } }

@__xuorig__ Anatomie d'une requête GraphQL.

@__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__ "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__ query MyQuery { film { title } }

@__xuorig__ curl -X POST -d '{"query": "query MyQuery { film
{ title } }"}' http:// mongraphql.com/api --header "Content-Type:application/json"

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

@__xuorig__ Query ﬁlm title characters name

@__xuorig__ Le Type System.

} }

} } 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 == Des clients avec des super pouvoirs!

@__xuorig__ • AutoSaisie • Validation côté client. • Intégration dans
nos IDE. • Génération de code.

@__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__ Gestion des versions.

@__xuorig__ Versioning Continuous Evolution

@__xuorig__ Sécurité?

@__xuorig__ • Maximum Depth • Query Complexity • Timeout

@__xuorig__ Je perds ma cache HTTP? ;(

@__xuorig__ POST /graphql

@__xuorig__ • Cache côté client • Requête persistées

@__xuorig__ Requêtes persistées

@__xuorig__ Requêtes persistées query MyQuery { film { title }
} Yo. c'est possible que j'utilise cette requête plus tard!

@__xuorig__ Requêtes persistées Cool pas de prob, envoie moi "abcd"
et je l'exécuterai pour toi

@__xuorig__ Requêtes persistées J'ai besoin de "abcd"!

@__xuorig__ Requêtes persistées "data": { "film": { "title": "A New
Hope" } }

@__xuorig__ GraphQL @ Shopify

@__xuorig__ Déﬁnir les types module GraphApi class Shop < GraphApi::ObjectType
field :name, :string field :currency, :string, null: false field :products, [Product], resolve: ->(shop, _, _) { shop.products } end end

@__xuorig__ type Shop { name: String currency: String! products: [Product!]
}

@__xuorig__ • Client Side Cache • Persisted Queries Le Schema
est "Checked In"

@__xuorig__ Et doit toujours être régénéré!

@__xuorig__ On prévient les "breaking changes"

@__xuorig__ Et on force les bonnes pratiques!

@__xuorig__ GraphQL est

@__xuorig__ A Un seul allez-retour pour récupérer tout se qu'un
client à besoin.

@__xuorig__ Declaratif et predictible. (plus besoin de notre fameux SELECT
*)

@__xuorig__ Le serveur exprime les possibilités.

@__xuorig__ Les clients déﬁnissent leurs besoins.

@__xuorig__ separation of concerns!

@__xuorig__ DX

@__xuorig__ DX (Developer Experience)

@__xuorig__ On "ship" plus rapidement

@__xuorig__ Et tout le monde est heureux.

Merci! Marc-André Giroux @__xuorig__

GraphQL à Shopify

GraphQL à Shopify

Transcript

More Decks by Marc-Andre Giroux

Other Decks in Programming

Featured