Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

GraphQL across the stack: How everything fits together

1.402 Aufrufe

Veröffentlicht am

My talk from GraphQL Summit 2017!

In this talk, I talk about a future for GraphQL which builds on the idea that GraphQL enables lots of tools to work together seamlessly across the stack. I present this through the lens of 3 examples: Caching, performance tracing, and schema stitching.

Stay tuned for the video recording from GraphQL Summit!

Veröffentlicht in: Software

GraphQL across the stack: How everything fits together

  1. 1. GraphQL Across the Stack How everything fits together Sashko Stubailo Open Source Lead, Apollo @stubailo
  2. 2. The goal of the Apollo team and community: Make building great applications simpler and more straightforward, with GraphQL.
  3. 3. What's in GraphQL? Best language for data requirements Universal schema for capabilities Huge ecosystem of tools
  4. 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. 5. Describing requirements vs. capabilities: GraphQL gives frontends and backends the correct split of responsibility.
  6. 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
  7. 7. React Android iOS Angular MongoDB Oracle Salesforce PostgreSQLMicroservice Vue client server
  8. 8. Apollo and GraphQL in 2017 An awesome ecosystem
  9. 9. Apollo Client 2.0 Universal frontend data management
  10. 10. GraphQL servers in any language
  11. 11. CLIENT Sends detailed data requirements SERVER Provides flexible, performant capabilities
  12. 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. 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. 14. Example 1. GraphQL result caching
  15. 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. 16. In REST: Cache-Control header
  17. 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. 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. 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. 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. 21. Client ServerGateway GraphQL result caching Specifies cache control info based on the schema and backends Reads cache controls, stores data using memcached
  22. 22. Client ServerGateway GraphQL result caching Complicated infrastructure and logic lives here, not in the GraphQL server code.
  23. 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. 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. 25. ServerGateway An open specification for GraphQL cache control Client Apollo Cache Control apollographql/apollo-cache-control
  26. 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" } ] } } }
  27. 27. github.com/apollographql/apollo-cache-control-js
  28. 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. 29. Idea 1: We can build on GraphQL's core advantages and expand them.
  30. 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. 31. Example 2. Tracing + Errors
  32. 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. 33. The first API with fine-grained insights built in
  34. 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. 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. 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. 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. 38. ServerGateway An open specification for GraphQL tracing Client
  39. 39. Client ServerGateway Devtools Schema Editor integrations Sketch.app integration Message queue GraphiQL Continuous integration Possibility for a whole world of tool integration.
  40. 40. Idea 2: GraphQL enables development tool integration.
  41. 41. Concept: GraphiQL performance view Trace
  42. 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
  43. 43. Example 3. Schema Stitching
  44. 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
  45. 45. Schema Stitching: Before ServerClient ServerClient ServerClient
  46. 46. Schema Stitching: After Server ServerClient Server Stitcher
  47. 47. launchpad.graphql.com/130rr3r49 Universe + Dark Sky
  48. 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. 49. DEVELOPER EXPERIENCE Universal API for the frontends ARCHITECTURE Modular, independently deployed services
  50. 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. 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. 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. 53. Stitching across teams Gateway User schema Payment schema Scheduling schema Feed schema Improve collaboration in an enterprise scenario
  54. 54. CLIENT QUERY Sends detailed data requirements SERVER SCHEMA Provides flexible, performant capabilities Conclusion
  55. 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. 56. CLIENT Apollo Client GATEWAY Apollo Engine SERVER Any GraphQL server TOOLING Devtools, editors
  57. 57. CLIENT Apollo Client GATEWAY Apollo Engine SERVER Any GraphQL server TOOLING Devtools, editors CACHING TRACING ERRORS STITCHING
  58. 58. CLIENT Apollo Client GATEWAY Apollo Engine SERVER Any GraphQL server TOOLING Devtools, editors CACHING TRACING ERRORS STITCHING
  59. 59. CLIENT Apollo Client GATEWAY Apollo Engine SERVER Any GraphQL server TOOLING Devtools, editors CACHING TRACING ERRORS STITCHING The NEXT THING?
  60. 60. What we see: GraphQL is becoming a transformative technology.
  61. 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

×