Hello World 2018 - GraphQL A query language for your API

Transcript

1. GraphQL A query language for your API
 Porto, 15th Feb 2018 Alexis Mas - @_Axxiss
2. 2 { "data": { "speaker": { "firstName": “Alexis", "lastName": “Mas", "role": “Software Engineer", "company": “XING", "twitter": “@_Axxiss“ } } } query me { speaker { firstName lastName role company twitter } }
3. What is GraphQL? 3
4. GraphQL is a Specification http://facebook.github.io/graphql/October2016/
5. 5 GraphQL is a query language for APIs and a server-side runtime for fulfilling those queries with your existing data.
6. 6 At its simplest, GraphQL is about asking for specific fields on objects
7. 7 Agnostic of its surroundings HTTP Web sockets SSH Web service File Database
8. 8 Powerful Tooling
9. 9 •A specification •A query language for APIs •A server-side runtime TL;DR: What is GraphQL?
10. 10 How can we use it?
11. 11 Queries Mutations
12. 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. 13 Anatomy of a query query Person { person(id: "cGVvcGxlOjE=") { name homeworld { name } } }
14. 14 query Person { person(id: "cGVvcGxlOjE=") { name homeworld { name } } } Operation definition Anatomy of a query
15. 15 query Person { person(id: "cGVvcGxlOjE=") { name homeworld { name } } } Operation definition Argument name & value Anatomy of a query
16. 16 query Person { person(id: "cGVvcGxlOjE=") { name homeworld { name } } } Operation definition Argument name & value Selection Anatomy of a query
17. 17 Operation definition Argument name & value Selection Anatomy of a query query Person { person(id: "cGVvcGxlOjE=") { name homeworld { name } } }
18. 18 Running a query query Person { person(id: "cGVvcGxlOjE=") { name homeworld { name } } } POST https://a-graphql-service.com/api { "query": "query Person { … }" }
19. 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. 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. 21 Let’s use variables •Avoid string manipulation •Use dynamic values •Reuse existent queries query Person { person(id: "cGVvcGxlOjE=") { name homeworld { name } } }
22. 22 $Variables query Person($personID: ID!) { person(id: "cGVvcGxlOjE=") { name homeworld { name } } } Variable definition
23. 23 $Variables query Person($personID: ID!) { person(id: $personID) { name homeworld { name } } } Variable definition Variable reference
24. 24 $Variables query Person($personID: ID!) { person(id: $personID) { name homeworld { name } } } { "personID": "cGVvcGxlOjE=" } Variable definition Variable reference Variable value
25. 25 $Variables query Person($personID: ID!) { person(id: $personID) { name homeworld { name } } } { "personID": "cGVvcGxlOjE=" } Variable definition Variable reference Variable value
26. 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. 27 Lets break it! query Person($personID: ID!) { pessoa(id: $personID) { name homeworld { name } } } { "personID": "cGVvcGxlOjE=" }
28. 28 Something went wrong… { "errors": [ { “message": "Cannot query field \"pessoa\" on type \”Root\”. Did you mean \”person\"?", "locations": [ { "line": 16, “column": 3 } ] } ] }
30. 30 Mutation mutation UpdateName($input: UpdateNameInput) { updatePerson(input: $input) { name homeworld { name } } } { “input”: { id: “cGVvcGxlOjE=“, name: “Korl Marcus“} }
31. 31 Just another response { "data": { "person": { "name": “Korl Marcus”, "homeworld": { "name": "Tatooine" } } }, “errors": null, “extensions”: null }
32. 32 •Queries: fetch data •Mutations: change data •Use variables for dynamic values TL;DR: How can we use it?
33. How does it work? 33
34. 34 Use cases Single application API API Gateway
36. 36 Client Engine Source (1) Send request (5) Send response (2) Validate request (3) Get data (3) Get data (4) Aggregate data
37. 37 The type system query Person { person(id: "cGVvcGxlOjE=") { name homeworld { name } } }
38. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 48 Scalars Int Float String Boolean ID Complex Object InputObject Enum Interfaces
49. 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. 50 Client Engine Source (1) Send request (5) Send response (2) Validate request (3) Get data (3) Get data (4) Aggregate data
51. Questions? Alexis Mas @_Axxiss
52. What now? 52
53. 53 graphql.org/swapi-graphql
54. 54 graphql.org howtographql.com YouTube: GraphQL Summit 2016 / 2017 GraphQL Europe 2017
56. Thank you! Alexis Mas @_Axxiss