GraphQL: Enabling a new generation of API developer tools
2 likes1,987 views
This document discusses the history and benefits of GraphQL as an API layer between frontends and backends. It provides examples of how GraphQL allows flexible queries to get only necessary data, and describes tools like GraphiQL, static query analysis, code generation and dev tools that improve the developer experience. GraphQL provides a shared language for frontend and backend teams to communicate about data requirements and optimize performance.
GraphQL: Enabling a new generation of API developer tools
- 1. Enabling a new generation of API developer tools GraphQL Sashko Stubailo @stubailo Apollo Open Source Lead, Meteor
- 2. Browser Web Server C L I E N T S E R V E R A B R I E F H I S T O R Y O F W E B A P P S <HTML /> Sending HTML from a web server to a browser
- 3. JavaScript UI API Server C L I E N T S E R V E R A B R I E F H I S T O R Y O F W E B A P P S { data } Sending data from an API server to a single-page app, for better performance
- 4. JavaScript UI API Server C L I E N T S E R V E R A B R I E F H I S T O R Y O F A P P S { data } Sending data from an API server to multiple clients in different environments Native iOS app
- 5. CordovaBrowser Native Microservice Microservice Microservice C L I E N T S E R V E R A B R I E F H I S T O R Y O F A P P S Splitting into microservices, waterfall loading and multiple APIs
- 6. CordovaBrowser Native Microservice Microservice Microservice C L I E N T S E R V E R A B R I E F H I S T O R Y O F A P P S Add an API gateway, now there’s a development bottleneck API gateway
- 7. Too many API endpoints, one per UI feature API endpoints don’t meet UI needs Possible performance or security issues to ship faster Takes too long to build the API for a new feature Frontend team develops API Backend team develops API
- 8. CordovaBrowser Native Microservice Microservice Microservice C L I E N T S E R V E R T H E F U T U R E O F A P P S The solution: GraphQL as the translation layer between frontend and backend GraphQL API gateway
- 9. Best of both worlds? Let’s look at the benefits…
- 10. Flexible: “Make your own endpoints” query Human { human(id: "1000") { name height(unit: FOOT) } } { "human": { "name": "Luke Skywalker", "height": 5.6430448 } } • Choose from your API’s schema of types, fields, and arguments • Computed fields, parameters, type conditions, and more • Validates queries for you
- 11. Performance: Get what you need • No need to hit multiple endpoints to render one page • Select only the fields that are needed • Batch across all data requirements • Eliminate unnecessary fetching with fancy clients, such as Apollo and Relay query Human { human(id: "1000") { name avatar(size: SMALL) friends { name } } }
- 12. Not just a tool: An open source spec S E R V E R S • Plain HTTP request • React • Angular • Vue • Polymer • Native iOS/Android C L I E N T S • Node.js • Ruby • Python • Scala • Java • Erlang T O O L S • API explorer (GraphiQL) • Editor autocomplete • Query validation • Mocking • Performance analysis • Code generation …and more
- 13. Think carefully about API needs Hardcode special endpoints User Interface Backend W I T H R E S T
- 14. Ask for data Get the data User Interface Backend W I T H G R A P H Q L
- 15. A better API experience
- 16. T O O L S
- 17. GraphiQL query editor GraphQL APIs are inherently self-documenting
- 18. Static query analysis inside your code Without running the code, find: • Typos in fields • Wrong arguments • Deprecated fields • Identify field usage apollostack/eslint-plugin-graphql
- 19. Query autocompletion in your editor We’re collaborating with Facebook and others on a new language service to power GraphQL features across editors and IDEs. jimkyndemeyer/js- graphql-intellij-plugin
- 20. Typed code generation: Swift, Java, TS, Flow The above query combined with schema information outputs the type definitions on the right. apollostack/apollo-codegen
- 22. Static queries for perf and security • Use fragments for static composition. • Queries sent to the server are predictable, and can be optimized. • Data requirements of app can be fully analyzed at build time. • Better security with persisted queries. Write your data requirements so that tooling can separate them from your UI code
- 23. C L I E N T S
- 24. Plain fetch Simple Predictable No UI consistency and performance features Caching client Some work required to set up and learn Easy to update the UI Manage data in one place Great dev tools GET GraphQL clients
- 25. Easy to bind data to your UI Visit dev.apollodata.com for more code snippets.
- 26. Chrome dev tools for Apollo Another benefit of using a sophisticated client is integrated tooling to understand your app.
- 27. Chrome dev tools for Apollo Another benefit of using a sophisticated client is integrated tooling to understand your app.
- 28. Chrome dev tools for Apollo Another benefit of using a sophisticated client is integrated tooling to understand your app.
- 29. P R O D U C T I O N I N S I G H T S
- 30. Backend point of view const HumanQuery = gql` query Human { human(id: "1000") { name height(unit: FOOT) } } `; Know exactly which parts of the code are using the fields and endpoints in the API, at runtime and statically, to evaluate backend changes and ask UI devs Query human Human name height friends
- 31. Frontend point of view query Human { human { name weather friends { name } } } Get insight into query performance to fix loading problems without diving into the backend, or have information to give backend team query Human
- 32. Optics Built entirely with Apollo and GraphQL!
- 33. A tool for GraphQL devs to understand their APIOptics
- 34. Conclusion • GraphQL provides a shared language to talk about data and queries • A wealth of tools can make UI devs more efficient than ever before • UI developers get insights into performance and caching • API devs know who is using the data and what to optimize for
- 35. Enabling a new generation of API developer tools GraphQL Sashko Stubailo @stubailo Open Source Lead, Meteor Want to work on GraphQL and open source technology full time? Email me at [email protected]! Community docs and general information: graphql.org Our Medium publication, with tips and in-depth articles about GraphQL: dev-blog.apollodata.com Apollo OSS and production tools: apollodata.com