An Introduction to GraphQL

The demos can be found here: https://github.com/bmullan91/graphql-demos

Transcript

1. An Introduc+on to GraphQL Brian Mullan - @bmullan91 28/06/2017 - ReactJS Dublin
2. whoami
3. Agenda • What is GraphQL • Its back story • The query language & examples • Live coding demos ! • Key principles
4. WHAT IS GRAPHQL?
5. WHAT IT'S NOT...
6. What It's Not... • A database or a storage engine • A query language for graph databases • A React or JS specific thing
7. SO WHAT IS IT?
8. GraphQL is a query language for APIs and a run8me for fulfilling those queries with your exis8ng data. GraphQL provides a complete and understandable descrip8on of the data in your API. — graphql.org
10. TL;DR IT'S A SPECIFICATION
11. The Back Story • Circa 2011 the mobile revolu4on was in full swing !" • HTML5 wrapper! Poor UX # • REST APIs $ • Under fetching: Mul4ple round trips to the server • Over fetching: Large JSON payloads • Versions, custom endpoints, coupling ...etc
12. GraphQL's Timeline • ! 2012 • " 2015 @ React Conf • ⏩ 2017 20+ languages • $ Used by GitHub, TwiAer, Shopify, Khan Academy etc
13. Example Query { me { friends { name } } }
14. Response { me: { friends: [ { name: 'John' } { name: 'Dick' } { name: 'Harry' } ] } }
15. Fields are func.ons { user(id: "123") { name profilePic(size: 200) { url } } }
16. Response { user: { name: "Brian", profilePic: { url: 'cdn.com/pic?size=200' } } }
17. DEMO TIME
18. KEY PRINCIPLES
19. VERSIONLESS
20. GRAPHS NOT ENDPOINTS
23. THIN LAYER SINGLE RESPONSIBILITY
24. Source: graphql.org
25. TYPE SYSTEM & INTROSPECTION
27. MORE! • graphql.org • h+ps:/ /github.com/bmullan91/graphql-demos • h+ps:/ /github.com/chentsulin/awesome-graphql • h+p:/ /graphql.org/swapi-graphql/