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!
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
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
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.
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
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
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.
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
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.
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
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
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
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