RESTful APIs are dead, long live GraphQL

Walking around using API REST issues in product teams and how can we find a solution to them in GraphQL

Transcript

1. RESTful APIs are dead, long live GraphQL José María Rodríguez Hurtado @durbon chema@durbon.com 1 #T3chFest2017
2. Do you are a curmudgeon? It's easy to cry over the technologies we loved and lost. But let's take time to appreciate the many ways in which technology really has improved 2
3. Do you are a hipster? “They want to be the latest trend in technology” 3
4. Solve real problems 4
5. Overview Reviewing REST Problems working on product with APIs GraphQL 5
8. ¿Using REST correctly? Nick Schrock. React London Meetup. 2015 8
9. Reviewing RESTful API 3 main principles 9
10. Main principles API REST - Define separate resources. Accessible via URI - These resources are manipulated using HTTP requests where the method (GET, POST, PUT, PATCH, DELETE) has specific meaning. - Discover resources, thanks to HATEOAS (Hypertext As The Engine Of Application State). 10
11. API RESTFul Endpoint resources GET /posts - Retrieves a list of tickets GET /posts/12 - Retrieves a specific ticket GET /posts/12/comments - Retrieves comments GET /posts/12/comments/42/ - Retrieve specific comment POST /posts - Creates a new post PUT /posts/12 - Updates post #12 with payload provided PATCH /posts/12 - Partially updates post #12 DELETE /posts/12 - Deletes post #12 11
12. Example Payload JSON { "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/" ], "species": [ "http://swapi.co/api/species/1/" ], "vehicles": [ "http://swapi.co/api/vehicles/14/", "http://swapi.co/api/vehicles/30/" ], "starships": [ "http://swapi.co/api/starships/12/", "http://swapi.co/api/starships/22/" 12
13. Working with APIs Product → Design → Engineering 13
14. Excessive Round Trips Client - Server R 14
15. Payload and bandwidth 15
16. /filmsWithDirectorAndTag /filmsWithPrincipalsCharacter /filmSummaries/1 /filmsDetails/1 /filmSummaryWithActors/1 Custom Endpoints 16
17. Versioning my APIs 17
18. Why not like REST? - Most REST API are really Ad-hoc RPC with custom endpoint definitions. Time spent maintaining many versioned endpoint - REST requires many requests - With REST, you request too much or too little data - REST often turns into a maze of poorly-documented endpoints 18
20. GraphQL isn't a new technology. Facebook: It has been delivering data to mobile News Feed since 2012 20
22. “GraphQL is a query language designed to build client applications by providing an intuitive and flexible syntax and system for describing their data requirements and interactions.” - GraphQL Specification https://facebook.github.io/graphql/ 22
23. GraphQL is a query language, like SQL? You don’t connect GraphQL directly to your backend or database. It’s an API layer, just like REST. GraphQL can be layered over multiple backends and databases, without the client being aware of where the data is coming from, just like REST. 23
24. Single Endpoint /graphql 24
26. Query Language Query { me { name } } { "me": { "name": "@durbon" } } 26
27. { author(id: 27) { name profilePics { width height url } } } { "author": { "name": "@durbon" "profilePics" : { "width": 250, "height": 250, "url": "http://avatarurl.com/250.jpg" } } } Ask for you want 27
28. { author(id: 27) { name profilePics(size: 640) { width height url } } } { "author": { "name": "Txema Rodríguez" "profilePics" : { "width": 640, "height": 640, "url": "http://avatar.com/640.jpg" } } } Ask for you want 28
29. { me (id: 27) { name, licPic: profilePics (size: 90){ width, height, url }, bigPic: profilePics (size: 800){ width, height, url } } } "me": { "name": "Txema Rodríguez" "licPic" : { "width": 90, "height": 90, "url": "http://avatar.com/90.jpg" }, "bigPic" : { "width": 800, "height": 800, "url": "http://avatar.com/800.jpg" } } } Ask for you want 29
30. Nested connection resources { me { name posts { title } } } { "me": { "name": "@durbon" "posts" : [ { title: "T3chfest is cool" }, { title: "API REST is dead" }, { title: "GraphQL is powerful" }, 30
31. { latestPost { title, author { name, twitter } }, authors { name } } { "data": { "latestPost": { "title": "¿Por qué deberíamos abandonar REST y empezar a usar GraphQL en nuestras APIs?", "author": { "name": "Txema Rodríguez", "twitter": "@durbon", } }, "authors": [ { "name": "Txema Rodriguez" }, { "name": "Dummy Blogger" } ] } } 31 Combining Queries
33. Also you can write using GraphQL Mutation In GraphQL, mutations are the way to allow GraphQL clients(or external parties) to modify your dataset. mutation writePost { post: createPost( title: "GraphQL is Awesome", content: "Yep, it's purely awesome." ) { _id, title } } 33
34. GraphQL Core principles 34
35. Type System GraphQL schema language it's similar to the query language, and allows us to talk about GraphQL schemas in a language-agnostic way. 35
36. Schemas and types - Object types and fields - Scalar types - Arguments - Enumeration types - Lists and Non-Null 36
37. Contract Client Backend Possibilities GraphQL Type System GraphQL Schema Requirements GraphQL Languages Queries Mutation App Server View 37
38. Schema type Query { me: User author (id: Int): Author } type Author { name: String profilePicture(size: Int = 50): ProfilePicture friends: [User] } type ProfilePicture { width: Int! height: Int! url: String! } 38
39. Composition GraphQL includes reusable units called fragments 39
40. Fragments { durbon: developer(_id: "durbon") { _id, name, login }, aracem: developer(_id: "aracem") { _id, name, login }, tylos: developer(_id: "tylos") { _id, name, login }, victor: developer(_id: "ivictorvmp") { _id, name, login } } { durbon: developer(_id: "durbon") { ...developerInfo }, aracem: developer(_id: "aracem") { ...developerInfo }, tylos: developer(_id: "tylos") { ...developerInfo }, victor: developer(_id: "ivictorvmp") { ...developerInfo } } fragment developerInfo on Developer { _id, name, login } 40
41. Fragments fragment authorInfo on Author { _id, name } fragment postInfo on Post { title, content, author { ...authorInfo }, comments { content, author { ...authorInfo } } } { post1: post(_id: "03390abb557) { ...postInfo } } 41
42. TimeLineView HeaderView BodyView fragment headerFragment on User { name profilePicture (size: 250){ url } coverPhoto (size: 1200){ name, url } } fragment bodyFragment on User { location { name } friends } 42 fragment timelineFragment on User { ...headerFragment ...bodyFragment }
43. Introspection Creating documentation, or rich IDE experiences 43
44. IntrospectionQuery query IntrospectionQueryTypeQuery { __schema { queryType { name fields { name description type { name kind } } } } } { "data": { "__type": { "name": "Developer", “Description”: “Name developer” "fields": [ { "name": "id", "type": { "name": null, "kind": "NON_NULL" } }, { "name": "name", "type": { "name": null, "kind": "NON_NULL" } 44
45. Auto documentation Generates API documentation for our consumers, and prevents us from spending precious coding time on documentation. 45
47. Static validation & IDE Integration 47
48. Code Generation 48
49. Execution After being validated, a GraphQL query is executed by a GraphQL server which returns a result that mirrors the shape of the requested query 49
50. Database “Microservices” Remote Services whatever your tech stack Your existing code GraphQL Execution 50
52. Think in Graph, not endpoint Fields independently of each other. Apply different context in order to retrieve such data 52
53. Function Resolver Each field on each type is backed by a function called the resolver which is provided by the GraphQL server developer When a field is executed, the corresponding resolver is called to produce the next value. 53
57. 57 where we can begin?
58. 58 GraphQL.org
59. Draft RFC Specification for GraphQL https://facebook.github.io/graphql/ 59
60. Reference implementation of GraphQL https://github.com/graphql/graphql-js 60
61. Wrapping a API REST 61
62. Javascript Python (graphene) Scala (sangria) Ruby Java Clojure Go PHP C# .NET Elixir Swift …. graphql.org/code/ 62
63. Client library 63 Relay React iOS Android
64. Public GraphQL APIs 64 Early Github GraphQL API https://developer.github.com/early-access/graphql/explorer/ SWAPI http://graphql.org/swapi-graphql/ More APIs https://github.com/APIs-guru/graphql-apis
65. Benefits of Exposing Data Through GraphQL - Boost your client development - Combining and Querying Data - Picking Your Payload - Single source of truth - Auto documentation. YEah!!! 65
66. A new scientific truth does not triumph by convincing its opponents and making them see the light, but rather because its opponents eventually die out, and a new generation grows up that is familiar with it. — Max Planck Are RESTful APIs dead? 66
67. @durbon 67 Thanks, #T3chFest2017!