GraphQL across the stack: How everything fits together
14 likes2,034 views
The document discusses how GraphQL simplifies application development by providing a unified approach to client and server interactions, enabling developers to describe data requirements and capabilities effectively. It highlights the ecosystem surrounding Apollo and GraphQL, illustrating concepts such as caching, tracing, and schema stitching for improved performance and collaboration. The presentation emphasizes the importance of modularity and transparency in building complex applications with multiple frontends and backends.
![Per-path cache hints
query {
post(id: 1) {
title
votes
readByCurrentUser
}
}
{
"data": { ... },
"extensions": {
"cacheControl": {
"version": 1,
"hints": [
{
"path": [
"post"
],
"maxAge": 240
},
{
"path": [
"post",
"votes"
],
"maxAge": 30
},
{
"path": [
"post",
"readByCurrentUser"
],
"scope": "PRIVATE"
}
]
}
}
}](https://image.slidesharecdn.com/graphqlacrossthestack-171027162227/85/GraphQL-across-the-stack-How-everything-fits-together-26-320.jpg)
GraphQL across the stack: How everything fits together
- 1. GraphQL Across the Stack How everything fits together Sashko Stubailo Open Source Lead, Apollo @stubailo
- 2. The goal of the Apollo team and community: Make building great applications simpler and more straightforward, with GraphQL.
- 3. What's in GraphQL? Best language for data requirements Universal schema for capabilities Huge ecosystem of tools
- 4. Separation of concerns, not technologies Client Data requirements API Client Data requirements API Endpoints GraphQL client server We went from separating HTML and JS to writing unified components. GraphQL is a component- like approach to data.
- 5. Describing requirements vs. capabilities: GraphQL gives frontends and backends the correct split of responsibility.
- 6. Today's apps can be complex ● Multiple frontends for different platforms ● Multiple backends where data lives ● Need for team coordination across different languages, technologies, and contexts Where do GraphQL and Apollo live? React Android iOS Angular MongoDB Oracle Salesforce PostgreSQL Microservice
- 8. Apollo and GraphQL in 2017 An awesome ecosystem
- 9. Apollo Client 2.0 Universal frontend data management
- 10. GraphQL servers in any language
- 11. CLIENT Sends detailed data requirements SERVER Provides flexible, performant capabilities
- 12. The GraphQL Query: A unit of data fetching 1. Send all of the requirements for a unit of your UI in one request 2. Server can analyze and optimize the entire query at once 3. Reduce backend fetches by batching and caching per-request
- 13. Some of the main questions we hear: 1. CACHING Load less data and save resources 2. TRANSPARENCY Understand what's happening 3. MODULARITY Combine parts into a seamless whole
- 14. Example 1. GraphQL result caching
- 15. Tradeoffs: GraphQL and caching ● HTTP caching often doesn't support POST requests, long keys ● Greater request diversity ● GraphQL is transport independent ● Automatically fine-grained cache control ● Declare it alongside your schema and resolvers Current approaches become harder to use, but there are opportunities for next generation features that leverage GraphQL specifically.
- 16. In REST: Cache-Control header
- 17. Adding caching to GraphQL: Idea 1 Should it go inside the server? ● DataLoader not ideal for caching across requests ● Don't want to add complexity to your GraphQL server Caching doesn't belong inside. GraphQL Server Cache? Backend
- 18. Adding caching to GraphQL: Idea 2 Cache outside of the server, both above and below as necessary. Keep complexity out of resolvers and GraphQL schema. Similar to HTTP infra, caching lives in a separate layer. GraphQL Server Cache Backend Cache
- 19. A new component in the GraphQL stack GraphQL Client GraphQL Server GraphQL Gateway Idea: Move infra complexity out of the GraphQL server Complexity
- 20. Apollo Engine Gateway that mediates between GraphQL clients and servers Caching, tracing, and errors designed specifically for GraphQL Next version of Optics apollographql.com/engine
- 21. Client ServerGateway GraphQL result caching Specifies cache control info based on the schema and backends Reads cache controls, stores data using memcached
- 22. Client ServerGateway GraphQL result caching Complicated infrastructure and logic lives here, not in the GraphQL server code.
- 23. Client ServerGateway Full stack caching Uses controls to inform client-side data store, expire data Specifies cache control info based on the schema and backends Reads cache controls, caches data using memcached
- 24. Adding to GraphQL without taking away: GraphQL has a specified place to add extensions to the result, next to data and errors. http://facebook.github.io/graphql/October2016/#sec-Response-Format
- 25. ServerGateway An open specification for GraphQL cache control Client Apollo Cache Control apollographql/apollo-cache-control
- 26. Per-path cache hints query { post(id: 1) { title votes readByCurrentUser } } { "data": { ... }, "extensions": { "cacheControl": { "version": 1, "hints": [ { "path": [ "post" ], "maxAge": 240 }, { "path": [ "post", "votes" ], "maxAge": 30 }, { "path": [ "post", "readByCurrentUser" ], "scope": "PRIVATE" } ] } } }
- 28. Cache control in a GraphQL-focused way Just like backend fetching, cache control is coupled to the nature of the data, so it should be defined in the schema and resolvers. The final caching behavior you get depends on what data was required by the client, and can be controlled by changing the query.
- 29. Idea 1: We can build on GraphQL's core advantages and expand them.
- 30. Caching in the API and the client Most people use a caching GraphQL client library. If we're already specifying cache controls for our gateway, the same info can be used for the client to expire data.
- 31. Example 2. Tracing + Errors
- 32. Fine-grained data, fine-grained perf Since your client is asking for data in a detailed way, you should expect to get detailed information about how your server is working. /graphql 220.8ms
- 33. The first API with fine-grained insights built in
- 34. Understand how server perf affects the client Know what is actually being used, rather than a dependency on an opaque endpoint Easily figure out which screen a performance issue will affect
- 35. Actionable data Not only can you track performance, but you can fix it on a fine-grained level! Easy to change what fields the client is fetching. query getAppActivityFeed { app { _id activities { containerId containerTypeId containerTypeName createdAt featureEnabled ... } activityCount } }
- 36. Client ServerGateway Tracing + Errors Declares mapping from GraphQL queries to UI components Collects performance info from resolvers and backends Extracts metrics, aggregates, samples, analyzes
- 37. Client ServerGateway Tracing + Errors Complicated data collection and analysis lives here, not in the server process. Also understands caching in the same context.
- 38. ServerGateway An open specification for GraphQL tracing Client
- 39. Client ServerGateway Devtools Schema Editor integrations Sketch.app integration Message queue GraphiQL Continuous integration Possibility for a whole world of tool integration.
- 40. Idea 2: GraphQL enables development tool integration.
- 41. Concept: GraphiQL performance view Trace
- 42. The ecosystem of tools for GraphQL GraphQL spec is robust and useful enough to spawn thousands of companion tools for every imaginable platform Let's continue to expand on those capabilities by building on specified community standards
- 44. Correct responsibilities, part 2 GraphQL API Data description Service GraphQL API Data description Service Endpoints GraphQLThis time, we're talking about communication between the GraphQL API and the backend services. network
- 48. Jason Lengstorf, IBM We needed a way to let multiple teams create, test, and maintain GraphQL data sources in isolation, but ultimately expose them all as part of the same /graphql endpoint on our platform. ibm.biz/gramps-graphql Abhi Aiyer, Workpop We set out to work on a solution that would combine our graphql services into one schema. This allows the client to query APIs across the system without worrying about the address of any given downstream service. apollographql.com/docs/graphql-tools/ schema-stitching.html GraphQL Join by APIs.guru https://blog.apis.guru/graphql-join-or-how-to-find-all-bars-a round-graphql-summit-with-a-single-query-e2ebfe27c67c
- 49. DEVELOPER EXPERIENCE Universal API for the frontends ARCHITECTURE Modular, independently deployed services
- 50. Client ServerGateway Today: Single GraphQL api Loads data from GraphQL API Talks to services directly and massages data into the schema Caching, tracing, and errors help you improve your API
- 51. Client ServerGateway Schema Stitching: Initial Loads data from GraphQL API, client data, external sources Automatically combines GraphQL backend services (Still single codebase) Helps understand the complete system: Tracing, errors
- 52. Client Gateway Schema Stitching: Ideal Loads data from GraphQL API, client data, external sources Decoupled GraphQL services describing their own schema Central arbiter. Stitches backends, caches backend results, and provides detailed tracing and errors Server Server Server
- 53. Stitching across teams Gateway User schema Payment schema Scheduling schema Feed schema Improve collaboration in an enterprise scenario
- 54. CLIENT QUERY Sends detailed data requirements SERVER SCHEMA Provides flexible, performant capabilities Conclusion
- 55. Continuously improving 1. CACHING Load less data and save resources 2. TRANSPARENCY Understand what's happening 3. MODULARITY Combine parts into a seamless whole
- 56. CLIENT Apollo Client GATEWAY Apollo Engine SERVER Any GraphQL server TOOLING Devtools, editors
- 57. CLIENT Apollo Client GATEWAY Apollo Engine SERVER Any GraphQL server TOOLING Devtools, editors CACHING TRACING ERRORS STITCHING
- 58. CLIENT Apollo Client GATEWAY Apollo Engine SERVER Any GraphQL server TOOLING Devtools, editors CACHING TRACING ERRORS STITCHING
- 59. CLIENT Apollo Client GATEWAY Apollo Engine SERVER Any GraphQL server TOOLING Devtools, editors CACHING TRACING ERRORS STITCHING The NEXT THING?
- 60. What we see: GraphQL is becoming a transformative technology.
- 61. Taking GraphQL to its full potential. That's what we're all about. Find me on Twitter/Medium/GitHub @stubailo Our newly relaunched site and docs apollographql.com Let's all build the future of GraphQL together! apollographql.com/#slack github.com/apollographql