5. Apollo
Set of tools to use with GraphQL
Server Libraries
• Apollo-server: bind graphQL endpoint to Node server
• Apollo-engine: Middleware for Node
• GraphQL-Tools: Build, mock, manipulate, stitch schemas
• Subscriptions-transport-ws: transport for Subscriptions
6. Apollo
Set of tools to use with GraphQL
Developer Tools
• Apollo Dev Tools
• Launchpad: Demo platform for GraphQL servers
• Apollo-Tracing: Performance Tracing
• Eslint-plugin-graphql
7. Apollo
Set of tools to use with GraphQL
Client Tools
• Apollo Client
• View integrations (react-apollo, etc)
8. Apollo Client
Fully featured GraphQL Client
• Incrementally Adoptable
• Universally Compatible
• Simple to get started with
• Inspectable and understandable
• Community Driven
16. Apollo Fetch
• Batching
• Reduced round trips for all data in view
• Loading state and network status tracking
• Error Handling with error policy options
• Refetch
• Polling Interval
• fetchMore (pagination)
17. Query Batching
• Sending Multiple queries to
server in one request
• Reduce round trips
• Single request means you can
utilize Data Loader for batching
actual data load from backend
DB
const client = new ApolloClient({
// ... other options ...
shouldBatch: true,
});
22. Repo:1 Repo:2
Caching Graphs
Repo
Demo-app
Name 1
IDStars
30
Usermrgn-w
Name
ID
30
Repo
Collection
Repo
cool-graph
Name 2
IDStars
12
Hierarchy Normalized
Repositories
Usermrgn-w
Name
ID
30
Repo
Collection
User:30
Repo:1 Repo:2
Repo
Demo-app
Name 1
IDStars
30
Repo
cool-graph
Name 2
IDStars
12
23. Syncing UI State
Repo
Demo-app
Name 1
ID
Stars
30
Repo:1
Repo
cool-graph
Name 2
ID
Stars
12
Repo:2User
mrgn-w
Name
ID
30
Repo
Collection
User:30
Repo:1 Repo:2
UIs are automatically subscribed to observe changes to cached records
and will automatically update
watchQuery method
View Integration
{repo: { id: 2, stars: 15 }}
15
Repo:2
24. Caching Client
• Manage data in one place
• All queries watch store for changes and update UI
accordingly
• Keep Data + UI consistent
• Avoid unnecessary refetches
UI
Component
UI
Component
27. cache-first
Tries reading from cache first
If all data is there in cache, returns that data
Only fetch from network if result is not in cache
Query
Cache
Network
Return
Data
28. network-and-cache
Tries reading from cache first
If the data is in the cache, that data is returned
Will always execute query with network interface, regardless
of if full data is in cache
Query
Cache
Network
Return
Data
30. cache-only
Never execute using network interface
Always fetch from cache
If data does not exist in cache, error is thrown
Allows you to only interact with data in your local client cache
Query
Cache
Return
Data
32. Cache Resolvers
Map of custom ways to resolve data from other parts of
cache
Allows us to tell Apollo Client to check the cache for a
particular object if that object may have been resolved
by another query
34. Further Query Optimization
• Batches queries
• UI responds to updates to rendered data automatically
• Reads from cache where appropriate
…But what about what’s left of the query that gets
sent?
35. GraphQL Execution Cycle
• Parses query into AST
• Validates if query makes sense given the schema
• Executes the query
36.
37.
38. GraphQL Execution Cycle
• Parses query into AST
• Validates if query makes sense given the schema
• Executes the query
39. • Aggregate query strings at build time
• Store Query to DB
• Return an ID to reference stored query
• Pass ID instead of query
40.
41.
42. • Mapping between GraphQL Documents and generated IDs
• Restricts queries accepted by the server by whitelisting
an allowed set
• Saves bandwidth between client and server by only
sending hash/id instead of full query
• Optimizes execution by not having to parse and validate
over and over on the server
Persisted Queries
43. • persistgraphql - Build tool
• Crawls client code for graphQL documents
• Creates mapping and IDs
• Writes to JSON file
• In Production mode, only the hash is sent
• Automatic persisted queries via Apollo Engine
• Protocol extension in front of GraphQL server
• Sends hash instead of text
• Server checks if there is a match in registry
• If not found, requests full text from client and saves has
to registry for subsequent requests
Persisted Queries
53. Apollo Client
• Fetch Data
• Cache
• Syncs client state + server
• Query manager
• Network Interface
• Framework Agnostic
• And more! (optimistic UI, SSR, etc)
54. Why Apollo Client?
Do more with less code
Reduce complexity
Modular Architecture
Flexible
Universal - Can manage ALL data
Highly customizable - No one size fits all, can be
crafted to fit your unique needs
Excellent tools