Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Hello World 2018 - GraphQL A query language for...
Search
Hello World Tech Conference
February 15, 2018
Programming
1
82
Hello World 2018 - GraphQL A query language for your API
Hello World Tech Conference
February 15, 2018
Tweet
Share
More Decks by Hello World Tech Conference
See All by Hello World Tech Conference
Hello World 2018 - Learn how to get that dream job at Google!
helloworldconf
0
110
Hello World 2018 - Introduction to Swift
helloworldconf
0
63
Hello World 2018 - Understanding attacker behaviors, motivations and common ways of operation
helloworldconf
0
70
Hello World 2018 - We need to talk about Preact
helloworldconf
1
78
Hello World 2018 - Why Ruby?
helloworldconf
0
47
Hello World 2018 - Recent Advances in Machine Learning
helloworldconf
0
67
Hello World 2018 - Quality from the start
helloworldconf
0
33
Hello World 2017 - React Native
helloworldconf
0
110
Hello World 2017 - Testing & QA - Carreira Profissional?
helloworldconf
0
83
Other Decks in Programming
See All in Programming
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
350
釣り地図SNSにおける有料機能の実装
nokonoko1203
0
190
Google Opalで使える37のライブラリ
mickey_kubo
3
130
Writing Better Go: Lessons from 10 Code Reviews
konradreiche
3
5.6k
開発組織の戦略的な役割と 設計スキル向上の効果
masuda220
PRO
5
550
20251016_Rails News ~Rails 8.1の足音を聴く~
morimorihoge
2
660
Reactive Thinking with Signals and the Resource API
manfredsteyer
PRO
0
100
CSC509 Lecture 06
javiergs
PRO
0
260
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
190
CSC509 Lecture 05
javiergs
PRO
0
310
Developer Joy - The New Paradigm
hollycummins
1
340
エンジニアインターン「Treasure」とHonoの2年、そして未来へ / Our Journey with Hono Two Years at Treasure and Beyond
carta_engineering
0
400
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
54k
Writing Fast Ruby
sferik
629
62k
How to Think Like a Performance Engineer
csswizardry
27
2.1k
A Modern Web Designer's Workflow
chriscoyier
697
190k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.7k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
920
Producing Creativity
orderedlist
PRO
347
40k
Site-Speed That Sticks
csswizardry
13
920
What's in a price? How to price your products and services
michaelherold
246
12k
Documentation Writing (for coders)
carmenintech
75
5.1k
BBQ
matthewcrist
89
9.8k
Transcript
GraphQL A query language for your API Porto, 15th Feb
2018 Alexis Mas - @_Axxiss
2 { "data": { "speaker": { "firstName": “Alexis", "lastName": “Mas",
"role": “Software Engineer", "company": “XING", "twitter": “@_Axxiss“ } } } query me { speaker { firstName lastName role company twitter } }
What is GraphQL? 3
GraphQL is a Specification http://facebook.github.io/graphql/October2016/
5 GraphQL is a query language for APIs and a
server-side runtime for fulfilling those queries with your existing data.
6 At its simplest, GraphQL is about asking for specific
fields on objects
7 Agnostic of its surroundings HTTP Web sockets SSH Web
service File Database
8 Powerful Tooling
9 •A specification •A query language for APIs •A server-side
runtime TL;DR: What is GraphQL?
10 How can we use it?
11 Queries Mutations
12 query Person { person(id: "cGVvcGxlOjE=") { name homeworld {
name } } } A query and its response { "data": { "person": { "name": "Luke Skywalker", "homeworld": { "name": "Tatooine" } } }, "errors": null, "extensions": null }
13 Anatomy of a query query Person { person(id: "cGVvcGxlOjE=")
{ name homeworld { name } } }
14 query Person { person(id: "cGVvcGxlOjE=") { name homeworld {
name } } } Operation definition Anatomy of a query
15 query Person { person(id: "cGVvcGxlOjE=") { name homeworld {
name } } } Operation definition Argument name & value Anatomy of a query
16 query Person { person(id: "cGVvcGxlOjE=") { name homeworld {
name } } } Operation definition Argument name & value Selection Anatomy of a query
17 Operation definition Argument name & value Selection Anatomy of
a query query Person { person(id: "cGVvcGxlOjE=") { name homeworld { name } } }
18 Running a query query Person { person(id: "cGVvcGxlOjE=") {
name homeworld { name } } } POST https://a-graphql-service.com/api { "query": "query Person { … }" }
19 POST https://a-graphql-service.com/api { "query": "query Person { … }"
} Running a query { "data": { "person": { "name": "Luke Skywalker", "homeworld": { "name": "Tatooine" } } }, "errors": null, "extensions": null }
20 Ask what you need, get exactly that query Person
{ person(id: "cGVvcGxlOjE=") { name homeworld { name } } } { "data": { "person": { "name": "Luke Skywalker", "homeworld": { "name": "Tatooine" } } }, "errors": null, "extensions": null }
21 Let’s use variables •Avoid string manipulation •Use dynamic values
•Reuse existent queries query Person { person(id: "cGVvcGxlOjE=") { name homeworld { name } } }
22 $Variables query Person($personID: ID!) { person(id: "cGVvcGxlOjE=") { name
homeworld { name } } } Variable definition
23 $Variables query Person($personID: ID!) { person(id: $personID) { name
homeworld { name } } } Variable definition Variable reference
24 $Variables query Person($personID: ID!) { person(id: $personID) { name
homeworld { name } } } { "personID": "cGVvcGxlOjE=" } Variable definition Variable reference Variable value
25 $Variables query Person($personID: ID!) { person(id: $personID) { name
homeworld { name } } } { "personID": "cGVvcGxlOjE=" } Variable definition Variable reference Variable value
26 Running a query with variables POST https://a-graphql-service.com/api { "query":
"query Person($pers…", "variables": { "personID": "cGVvcGxlOjE" } } { "data": { "person": { "name": "Luke Skywalker", "homeworld": { "name": "Tatooine" } } }, "errors": null, "extensions": null }
27 Lets break it! query Person($personID: ID!) { pessoa(id: $personID)
{ name homeworld { name } } } { "personID": "cGVvcGxlOjE=" }
28 Something went wrong… { "errors": [ { “message": "Cannot
query field \"pessoa\" on type \”Root\”. Did you mean \”person\"?", "locations": [ { "line": 16, “column": 3 } ] } ] }
29
30 Mutation mutation UpdateName($input: UpdateNameInput) { updatePerson(input: $input) { name
homeworld { name } } } { “input”: { id: “cGVvcGxlOjE=“, name: “Korl Marcus“} }
31 Just another response { "data": { "person": { "name":
“Korl Marcus”, "homeworld": { "name": "Tatooine" } } }, “errors": null, “extensions”: null }
32 •Queries: fetch data •Mutations: change data •Use variables for
dynamic values TL;DR: How can we use it?
How does it work? 33
34 Use cases Single application API API Gateway
35
36 Client Engine Source (1) Send request (5) Send response
(2) Validate request (3) Get data (3) Get data (4) Aggregate data
37 The type system query Person { person(id: "cGVvcGxlOjE=") {
name homeworld { name } } }
38 The type system query Person { person(id: "cGVvcGxlOjE=") {
name homeworld { name } } } type Query { person(id: ID!): Person! } type Person { id: ID! name: String height: Int homeworld: Planet } type Planet { id: ID! name: String climates: [String] }
39 The type system query Person { person(id: "cGVvcGxlOjE=") {
name homeworld { name } } } type Query { person(id: ID!): Person! } type Person { id: ID! name: String height: Int homeworld: Planet } type Planet { id: ID! name: String climates: [String] }
40 The type system query Person { person(id: "cGVvcGxlOjE=") {
name homeworld { name } } } type Query { person(id: ID!): Person! } type Person { id: ID! name: String height: Int homeworld: Planet } type Planet { id: ID! name: String climates: [String] }
41 The type system query Person { person(id: "cGVvcGxlOjE=") {
name homeworld { name } } } type Query { person(id: ID!): Person! } type Person { id: ID! name: String height: Int homeworld: Planet } type Planet { id: ID! name: String climates: [String] }
42 The type system query Person { person(id: "cGVvcGxlOjE=") {
name homeworld { name } } } type Query { person(id: ID!): Person! } type Person { id: ID! name: String height: Int homeworld: Planet } type Planet { id: ID! name: String climates: [String] }
43 The type system query Person { person(id: "cGVvcGxlOjE=") {
name homeworld { name } } } type Query { person(id: ID!): Person! } type Person { id: ID! name: String height: Int homeworld: Planet } type Planet { id: ID! name: String climates: [String] }
44 The type system query Person { person(id: "cGVvcGxlOjE=") {
name homeworld { name } } } type Query { person(id: ID!): Person! } type Person { id: ID! name: String height: Int homeworld: Planet } type Planet { id: ID! name: String climates: [String] } Scalars
45 The type system query Person { person(id: "cGVvcGxlOjE=") {
name homeworld { name } } } type Query { person(id: ID!): Person! } type Person { id: ID! name: String height: Int homeworld: Planet } type Planet { id: ID! name: String climates: [String] } Scalars Objects
46 The type system query Person { person(id: "cGVvcGxlOjE=") {
name homeworld { name } } } type Query { person(id: ID!): Person! } type Person { id: ID! name: String height: Int homeworld: Planet } type Planet { id: ID! name: String climates: [String] } Scalars Objects Non-null
47 The type system query Person { person(id: "cGVvcGxlOjE=") {
name homeworld { name } } } type Query { person(id: ID!): Person! } type Person { id: ID! name: String height: Int homeworld: Planet } type Planet { id: ID! name: String climates: [String] } Scalars Objects Non-null Lists
48 Scalars Int Float String Boolean ID Complex Object InputObject
Enum Interfaces
49 Wrapper types ID can be null? List can be
null? ID YES What list? ID! NO What list? [ID] YES YES [ID!] NO YES [ID]! YES NO [ID!]! NO NO
50 Client Engine Source (1) Send request (5) Send response
(2) Validate request (3) Get data (3) Get data (4) Aggregate data
Questions? Alexis Mas @_Axxiss
What now? 52
53 graphql.org/swapi-graphql
54 graphql.org howtographql.com YouTube: GraphQL Summit 2016 / 2017 GraphQL
Europe 2017
55
Thank you! Alexis Mas @_Axxiss