Download as PDF, PPTX
Uploaded bySashko Stubailo
GraphQL: Enabling a new generation of API developer tools
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.
More Related Content
Similar to GraphQL: Enabling a new generation of API developer tools
GraphQL: Enabling a new generation of API developer tools
- 1. Enabling a newgeneration of API developer tools GraphQL Sashko Stubailo @stubailo Apollo Open Source Lead, Meteor
- 2. Browser Web Server C LI 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 CL 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 CL 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 MicroserviceMicroservice 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 MicroserviceMicroservice 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 MicroserviceMicroservice 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 bothworlds? Let’s look at the benefits…
- 10. Flexible: “Make yourown 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 whatyou 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 atool: 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 aboutAPI needs Hardcode special endpoints User Interface Backend W I T H R E S T
- 14. Ask for data Getthe data User Interface Backend W I T H G R A P H Q L
- 15. A better APIexperience
- 16. T O OL S
- 17. GraphiQL query editor GraphQLAPIs are inherently self-documenting
- 18. Static query analysisinside your code Without running the code, find: • Typos in fields • Wrong arguments • Deprecated fields • Identify field usage apollostack/eslint-plugin-graphql
- 19. Query autocompletion inyour 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 forperf 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 IE N T S
- 24. Plain fetch Simple Predictable No UIconsistency 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 binddata to your UI Visit dev.apollodata.com for more code snippets.
- 26. Chrome dev toolsfor Apollo Another benefit of using a sophisticated client is integrated tooling to understand your app.
- 27. Chrome dev toolsfor Apollo Another benefit of using a sophisticated client is integrated tooling to understand your app.
- 28. Chrome dev toolsfor Apollo Another benefit of using a sophisticated client is integrated tooling to understand your app.
- 29. P R OD U C T I O N I N S I G H T S
- 30. Backend point ofview 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 ofview 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 entirelywith Apollo and GraphQL!
- 33. A tool forGraphQL devs to understand their APIOptics
- 34. Conclusion • GraphQL providesa 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 newgeneration 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 sashko@meteor.com! 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