No REST for the weary... Introducing GraphQL (NodeFest Japan)

RESTful APIs can make fetching data pretty hairy sometimes, but fetching data doesn’t have to be so difficult. Enter GraphQL… the query language where you can ask for exactly what you need with a single HTTP request. Come learn what all the buzz is about!

What is GraphQL? How does it differ from REST? In this session, I’ll answer these questions as well as give you an overview of the ecosystem. Of course, an introduction would not be complete without a demonstration of how to use GraphQL, including queries, resolving, and more!

You’ll get the most out of this session if you’re familiar with JavaScript and ES6 syntax. You’ll get all the fancy concepts you need through code examples.

Transcript

1. No REST for the weary… Introducing GraphQL Sia Karamalegos @thegreengreek on Twitter and Medium siakaramalegos on GitHub
2. Who am I? @thegreengreek on Twitter and Medium siakaramalegos on GitHub
3. What are we talking about? Theory & Practice History and Context of APIs Disadvantages of REST Introducing GraphQL Exploring GraphQL Queries Building a GraphQL Schema
4. History and Context of APIs Before REST, there was SOAP. It was tightly coupled between the client and server, so if one side changed, it broke. REST was developed to better decouple the client and server. * REST (Representational State Transfer) is technically an architecture style while SOAP (Simple Object Access Protocol) is a protocol.
5. What is REST? Uses standard HTTP verbs* for fetching and updating data and URIs that reference a particular resource. Focuses on modelling the data of a domain rather than modelling interactions between services. REST is resource-oriented. HTTP Verb Path Used for GET /photos display a list of all photos GET /photos/new return an HTML form for creating a new photo POST /photos create a new photo GET /photos/:id display a specific photo GET /photos/:id/edit return an HTML form for editing a photo PATCH/PUT /photos/:id update a specific photo DELETE /photos/:id delete a specific photo Example from Rails Routing from the Outside In http://guides.rubyonrails.org/routing.html#crud-verbs-and-actions Typical REST API example for a photos resource
6. SOAP vs REST Needs-Oriented Resource-Oriented Loose coupling between client and server Tight coupling between client and server SOAP SOAP REST REST
7. REST in Practice GET /posts An Opinionated Blog Functional Programming is Dead Laura Elsif 7/7/17 Tabs vs Spaces Ajax Rodriguez 3/3/17 How to Exit VIM: Use Emacs Lamda Houston 1/2/16 Object-Oriented Programming is Dead Laura Elsif 1/12/15 GET /posts/234 GET /posts/233 GET /posts/231 GET /posts/199 GET /authors/9 GET /authors/2 GET /authors/5 GET /authors/9
8. So what’s the problem? Chatty == Slow Latency/Overhead Costs on 4G is about 55 ms/request. 9 requests = ½ second before processing the request & sending the response! Slow start TCP gradually ramps up data sending speed, so 1 big request is faster than 9 small ones. Too Much Data Only wanted blog title, data, and author name, but got thousands of extra lines of data. We can’t pick and choose just what we want.
9. What do we really want? Needs-Oriented Resource-Oriented Loose coupling between client and server Tight coupling between client and server SOAP SOAP REST REST
10. GraphQL GraphQL working spec: https://facebook.github.io/graphql/
11. Exploring GraphQL Queries Unofficial Star Wars API GraphQL Console https://github.com/siakaramalegos/star_wars_graphql
14. Building a GraphQL Schema Live demo! Finished code: https://github.com/siakaramalegos/star_wars_graphql
15. server.js
16. schema.js
17. schema.js
18. Ecosystem GraphQL Servers GraphQL-JS (Node) - original implementation, use with express-graphql Apollo-Server (Node) - by Apollo Other Platforms GraphQL Clients - not required, but easier Relay - Facebook’s GraphQL toolkit. Apollo Client - Use with a connector for your front-end framework of choice (React- Apollo, Angular-Apollo, etc.). Other GraphQL Tools GraphiQL - handy in-browser IDE for querying GraphQL endpoints. DataLoader - batching and caching library, by Facebook. Create GraphQL Server - command line tool to scaffold a GraphQL server using Node and a Mongo database. GraphQL-up - another tool to quickly bootstrap a new GraphQL back-end powered by GraphCool’s service.
19. Resources Articles and Videos So what’s this GraphQL thing I keep hearing about? By Sacha Greif Give it a REST: use GraphQL for your APIs by David Celis Evolution of API Design (Chain React 2017) by Eric Baer Exploring GraphQL (React Europe 2015) by Lee Byron Zero to GraphQL in 30 Minutes by Steven Luscher (Python, Ruby, and JavaScript!) GraphQL vs. REST by Sashko Stubailo Docs, Tutorials, and Other Resources Official website with documentation, examples, and tutorials (JavaScript tutorial) Awesome list of GraphQL & Relay resources (Github repo) A collective list of public GraphQL APIs (Github repo)
20. Thanks! Code & Slides: https://github.com/siakaramalegos/star_wars_graphql Give me feedback: https://tinyurl.com/siaspeaks @thegreengreek on Twitter and Medium siakaramalegos on GitHub