Download as PDF, PPTX
![JSON based
transport
{
"query": "...",
"operationName": "...",
"variables": {
"myVariable": “…”,
…
}
}
{
"data": { ... },
"errors": [ ... ]
}
Request Response](https://image.slidesharecdn.com/20170624graphql-170703082324/85/20170624-GraphQL-Presentation-51-320.jpg)
![JSON based
transport
+ Quick & Easy in the browser
+ human readable
{
"query": "...",
"operationName": "...",
"variables": {
"myVariable": “…”,
…
}
}
{
"data": { ... },
"errors": [ ... ]
}
Request Response](https://image.slidesharecdn.com/20170624graphql-170703082324/85/20170624-GraphQL-Presentation-52-320.jpg)
![JSON based
transport
+ Quick & Easy in the browser
+ human readable
- Not friendly for binary data
{
"query": "...",
"operationName": "...",
"variables": {
"myVariable": “…”,
…
}
}
{
"data": { ... },
"errors": [ ... ]
}
Request Response](https://image.slidesharecdn.com/20170624graphql-170703082324/85/20170624-GraphQL-Presentation-53-320.jpg)
![JSON based
transport
+ Quick & Easy in the browser
+ human readable
- Not friendly for binary data
{
"query": "...",
"operationName": "...",
"variables": {
"myVariable": “…”,
…
}
}
Request {
"data": { ... },
"errors": [ ... ]
}
Response](https://image.slidesharecdn.com/20170624graphql-170703082324/85/20170624-GraphQL-Presentation-54-320.jpg)
![Request {
"data": { ... },
"errors": [ ... ]
}
Response{
"query": “{
user {
name
}
}”,
}](https://image.slidesharecdn.com/20170624graphql-170703082324/85/20170624-GraphQL-Presentation-55-320.jpg)
![Request {
"data": { ... },
"errors": [ ... ]
}
Response{
"query": “{
user {
name
}
}”,
}
Graph
Query Language](https://image.slidesharecdn.com/20170624graphql-170703082324/85/20170624-GraphQL-Presentation-56-320.jpg)
![Request {
"data": { ... },
"errors": [ ... ]
}
Response{
"query": “{
user {
name
}
}”,
}
+ simple (few rules)
+ space efficient
Graph
Query Language](https://image.slidesharecdn.com/20170624graphql-170703082324/85/20170624-GraphQL-Presentation-57-320.jpg)
![Request {
"data": { ... },
"errors": [ ... ]
}
Response{
"query": “{
user {
name
}
}”,
}
+ simple (few rules)
+ space efficient
- something you need to learn
Graph
Query Language](https://image.slidesharecdn.com/20170624graphql-170703082324/85/20170624-GraphQL-Presentation-58-320.jpg)
![more than
one item
Example Query
{
viewer {
allTeams (first: 2) {
edges {
node {
id
name
}
}
}
}
}
Example Response
{
"data": {
"viewer": {
"allTeams": {
"edges": [{
"node": {
"id": "VGVhbToxNjk=",
"name": "oslo"
}
}, {
"node": {
"id": "VGVhbToxNjg=",
"name": "london"
}
}] } } } }](https://image.slidesharecdn.com/20170624graphql-170703082324/85/20170624-GraphQL-Presentation-84-320.jpg)
Uploaded byMartin Heidegger
20170624 GraphQL Presentation
GraphQL is a data query and manipulation language for APIs that provides several advantages over REST APIs: - GraphQL allows clients to define the structure of the data required, and exactly the fields they need from the server. This prevents over-fetching and under-fetching compared to REST. - GraphQL queries use a typed schema so clients can know the types of data available without having to make a request. It also allows for nested queries to fetch multiple objects in one request. - GraphQL uses HTTP POST requests with a JSON body to specify the query and variables. This provides security advantages over REST by allowing all requests to go to a single endpoint. - GraphQL queries support variables which
More Related Content
Similar to 20170624 GraphQL Presentation
20170624 GraphQL Presentation
- 1. GraphQL… What’s up with that? byMartin Heidegger
- 2. Why me? Martin Heidegger https://github.com/martinheidegger ±15years experience Webservices, Rest, RPC, JSON(p), Keep-Alive Communication, Dynamic JavaScript, HTML-based Protocols 6 months GraphQL project PostgraphQL contributor
- 4.
- 5.
- 6.
- 7.
- 8. • What problemdoes GraphQL solve? • What is GraphQL? • How is it solved? • Try out some GraphQL • Is it the future? in the next 15 minutes…
- 9.
- 10.
- 11.
- 14.
- 15.
- 17.
- 18.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 33.
- 34.
- 35. GraphQL is not… …a server … a database … a client … finalized … a crazy monkey
- 36.
- 37.
- 38.
- 39.
- 40. GraphQL is… … alanguage specification … modern … for clients (that can make mistakes) … for servers (that can make mistakes) … a crazy monkey
- 41.
- 42.
- 43. https://en.wikipedia.org/wiki/SQL https://en.wikipedia.org/wiki/Join_(SQL) SELECT users.id, users.name,users.email FROM users WHERE id=“leichtgewicht” GraphQL 💪 == 💪 SQL
- 44. SELECT users.id, users.name,users.email, files.url FROM users WHERE id=“leichtgewicht” INNER JOIN files ON users.avatarID = files.id https://en.wikipedia.org/wiki/SQL https://en.wikipedia.org/wiki/Join_(SQL) GraphQL 💪 == 💪 SQL
- 45. WSDL 💡→ GraphQL💡 https://en.wikipedia.org/wiki/Web_Services_Description_Language <?xmlversion="1.0" encoding="UTF-8"?> <description xmlns="http://www.w3.org/ns/wsdl" targetNamespace=“http://www.tmsws.com/wsdl20sample”> <documentation>This is a sample WSDL 2.0 document.</documentation> <types> <xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema" targetNamespace="http://www.example.com/wsdl20sample"> <xs:element name="request"> ... </xs:element> <xs:element name="response"> ... </xs:element> </xs:schema> </types> <interface name="Interface1"> <fault name="Error1" element="tns:response"/> <operation name="Get" pattern="http://www.w3.org/ns/wsdl/in-out"> <input messageLabel="In" element="tns:request"/> <output messageLabel="Out" element="tns:response"/> </operation> </interface> <service name="Service1" interface="tns:Interface1"> <endpoint name="HttpEndpoint" binding="tns:HttpBinding" address="http://www.example.com/rest/"/>
- 46.
- 47. One URL perset! curl -X POST https://api.github.com/graphql
- 48. One URL perset! curl -X POST https://api.github.com/graphql + all advantages of http (proxy-able, works in browser) + easy setup like SQL + security through http headers - not human friendly (like REST)
- 49. GET PUT DELETEHEAD PATCH OPTIONS POST✅ CONNECT Everything is POST
- 50. GET PUT DELETEHEAD PATCH OPTIONS POST✅ CONNECT + no old data, ever! (no caching) + secure - not human friendly (can not send a request to anyone) Everything is POST
- 51. JSON based transport { "query": "...", "operationName":"...", "variables": { "myVariable": “…”, … } } { "data": { ... }, "errors": [ ... ] } Request Response
- 52. JSON based transport + Quick& Easy in the browser + human readable { "query": "...", "operationName": "...", "variables": { "myVariable": “…”, … } } { "data": { ... }, "errors": [ ... ] } Request Response
- 53. JSON based transport + Quick& Easy in the browser + human readable - Not friendly for binary data { "query": "...", "operationName": "...", "variables": { "myVariable": “…”, … } } { "data": { ... }, "errors": [ ... ] } Request Response
- 54. JSON based transport + Quick& Easy in the browser + human readable - Not friendly for binary data { "query": "...", "operationName": "...", "variables": { "myVariable": “…”, … } } Request { "data": { ... }, "errors": [ ... ] } Response
- 55. Request { "data": {... }, "errors": [ ... ] } Response{ "query": “{ user { name } }”, }
- 56. Request { "data": {... }, "errors": [ ... ] } Response{ "query": “{ user { name } }”, } Graph Query Language
- 57. Request { "data": {... }, "errors": [ ... ] } Response{ "query": “{ user { name } }”, } + simple (few rules) + space efficient Graph Query Language
- 58. Request { "data": {... }, "errors": [ ... ] } Response{ "query": “{ user { name } }”, } + simple (few rules) + space efficient - something you need to learn Graph Query Language
- 59. Concept { field field … } Concept query { field field … } a simplequery { "query": “{ user { name } }”, } basic
- 60. Concept { field field … } Query Language Query query{ serverName serverIp } Concept query { field field … } basic
- 61. Query Language Query query{ serverName serverIp } Example Response { “data”: { “serverName”: “www.scrapbox.io", “serverIp”: “127.0.0.1” } } basic
- 62. Query Language Query query{ serverName serverIp } Example Response { “data”: { “serverName”: “www.scrapbox.io", “serverIp”: “127.0.0.1” } } basic Same Format + consistent
- 63. Query Language Query query{ serverName serverIp } Example Response { “data”: { “serverName”: “www.scrapbox.io", “serverIp”: “127.0.0.1” } } basic Same Format + consistent + easy to understand
- 64. Query Language Query query{ serverName serverIp } Example Response { “data”: { “serverName”: “www.scrapbox.io", “serverIp”: “127.0.0.1” } } basic Same Format + consistent + easy to understand + less bugs
- 65. Query Language Query query{ serverName serverIp } Example Response { “data”: { “serverName”: “www.scrapbox.io", “serverIp”: “127.0.0.1” } } basic SELECT apps.serverName, apps.serverIp FROM apps WHERE id=“myApp”” SQL equivalent
- 66. child properties Concept { field field … } Concept query { object{ field field … } } deep fields (aka. joins)
- 67. child properties Concept { field field … } Query LanguageQuery query { checkHealth { healthy message } } Concept query { object { field field … } }
- 68. child properties Query LanguageQuery query { checkHealth { healthy message } } Example Response { “data”: { “checkHealth”: { “healthy”: true “message”: “OK” } } }
- 69. child properties Query LanguageQuery query { checkHealth { healthy message } } Example Response { “data”: { “checkHealth”: { “healthy”: true “message”: “OK” } } }SQL equivalent SELECT checkHealth.healthy, checkHealth.message FROM apps WHERE id=“myApp”” INNER JOIN checkHealth ON checkHealth.appId = apps.id
- 70.
- 71.
- 72.
- 73. documented by default https://us-west-2.api.scaphold.io/graphql/zei-sca-git + IntrospectionAPI + GraphiQL viewer - Documentation can be heavy
- 74. documented by default https://us-west-2.api.scaphold.io/graphql/zei-sca-git + IntrospectionAPI + GraphiQL viewer - Documentation can be heavy - No http-GET means no caching
- 75. variants or selections Concept { field field … } Concept query { object(arg: value) { field field … } } parameters (aka. query string) https://myapi.com/object?arg=value
- 76. variants or selections Concept { field field … } Example Query query{ getTeam (id: “VGVhbToxNjk=”) name createdAt } } Concept query { object (arg: value) { field field … } }
- 77. variants or selections Example Query query{ getTeam (id: “VGVhbToxNjk=”) { name createdAt } } Example Response { “data”: { “getTeam”: { “name”: “oslo”, “createdAt”: “2016-12-09T20:27:50.000Z” } } }
- 78.
- 79. prepared statements Concept { field field … } Concept query ($arg: ArgType){ object (arg: $arg) { field field … } } safe variables (aka. injection proof) { "query": "...", "operationName": "...", "variables": { "myVariable": “…”, … } }
- 80. prepared statements Concept { field field … } Example Query query ($id:ID) { getTeam (id: $id) { name createdAt } } Variables{ “id”: “VGVhbToxNjk=” } Concept query ($arg: ArgType) { object (arg: $arg) { field field … } }
- 81. prepared statements Example Query query ($id:ID) { getTeam (id: $id) { name createdAt } } Variables{ “id”: “VGVhbToxNjk=” } Example Response { “data”: { “getTeam”: { “name”: “oslo”, “createdAt”: “2016-12-09T20:27:50.000Z” } } }
- 82. more than one item Concept { field field … } Concept query{ object (arg: value) { field field … } } result list (aka. arrays)
- 83. more than one item Concept { field field … } ExampleQuery { viewer { allTeams (first: 2) { edges { node { id name } } } } } Concept query { object (arg: value) { field field … } }
- 84. more than one item ExampleQuery { viewer { allTeams (first: 2) { edges { node { id name } } } } } Example Response { "data": { "viewer": { "allTeams": { "edges": [{ "node": { "id": "VGVhbToxNjk=", "name": "oslo" } }, { "node": { "id": "VGVhbToxNjg=", "name": "london" } }] } } } }
- 85. namespaces other than query Concept { field field … } Concept namespacemyQuery ($arg: ArgType) { object (arg: $arg) { field field … } } namespaces (aka. its all just names)
- 86. namespaces other than query Concept { field field … } Concept namespacemyQuery ($arg: ArgType) { object (arg: $arg) { field field … } } Example Query mutation ($input: UpdateTeamInput) { updateTeam (input: $input) { name id } } Variables{ “id”: “VGVhbToxNjk=”, “name”: ”OSLO” }
- 87. namespaces other than query ExampleResponse { “data”: { “updateTeam”: { “changedTeam”: { “id”: “VGVhbToxNjk=”, “name”: “OSLO” } } } } Example Query mutation ($input: UpdateTeamInput) { updateTeam (input: $input) { name id } } Variables{ “id”: “VGVhbToxNjk=”, “name”: ”OSLO” }
- 88.
- 89. What do wewant? GraphQL! When do we want it? NOW!
- 90.
- 93. Many Frameworks … andmany more
- 94.
- 95.
- 98. Do you useRelay/GraphQL, Relay or something similar to get the data from your backend? “Not at this time. We may end up taking some ideas from GraphQL/Relay and applying them to our own internal API Infrastructure, though.” http://devnacho.com/2016/03/20/how-airbnb-uses-react/ March 2016 Leland Richardson (Airbnb Software Engineer)
- 99. the designer is theenemy of deadlines
- 100.