Prepared Docs

Quick Reference

Use Apollo Client for:

GraphQL queries and mutations
Automatic request deduplication
Client-side caching
Optimistic updates

Key patterns:

useQuery for data fetching (not useEffect + fetch)
useMutation for data updates
Multiple useQuery hooks run in parallel automatically
Apollo cache shared across component instances
Show a failure state for an Apollo error; don't report it. The shell's Apollo client reports it once (Error Handling)

Apollo Client Basics

useQuery for Fetching

useMutation for Updates

Automatic Deduplication

Apollo automatically deduplicates identical queries:

Parallel Queries

Multiple useQuery hooks run in parallel automatically:

Skip Queries Conditionally

Polling

Optimistic Updates

Cache Updates

Error Handling

Show the user a failure state and stop. Don't call logger.errorAndReport for an Apollo error: the shell's Apollo client reports a network or transport failure once, after any retries, and the backend has already reported an error it returned in the response. See Who reports an error. (useQuery has no onError option in Apollo 4.)

Lazy Queries

Fetching in Components vs Hooks

In Components (Simple)

In Hooks (Reusable Logic)

Event Listener Deduplication

Share global event listeners across component instances:

Caching Strategies

Cache-First (Default)

Network-Only (Fresh Data)

Cache-and-Network (Background Refresh)

GraphQL Operations - Query/mutation patterns
Pub/Sub - GraphQL subscriptions
Eliminating Waterfalls - Parallel queries

Reference Files

For more detailed technical guidance, see these reference files:

Architecture / File Organization

Quick Reference

Use Apollo Client for:

GraphQL queries and mutations
Automatic request deduplication
Client-side caching
Optimistic updates

Key patterns:

useQuery for data fetching (not useEffect + fetch)
useMutation for data updates
Multiple useQuery hooks run in parallel automatically
Apollo cache shared across component instances
Show a failure state for an Apollo error; don't report it. The shell's Apollo client reports it once (Error Handling)

Apollo Client Basics

useQuery for Fetching

useMutation for Updates

Automatic Deduplication

Apollo automatically deduplicates identical queries:

Parallel Queries

Multiple useQuery hooks run in parallel automatically:

Skip Queries Conditionally

Polling

Optimistic Updates

Cache Updates

Error Handling

Lazy Queries

Fetching in Components vs Hooks

In Components (Simple)

In Hooks (Reusable Logic)

Event Listener Deduplication

Share global event listeners across component instances:

Caching Strategies

Cache-First (Default)

Network-Only (Fresh Data)

Cache-and-Network (Background Refresh)

GraphQL Operations - Query/mutation patterns
Pub/Sub - GraphQL subscriptions
Eliminating Waterfalls - Parallel queries

Reference Files

For more detailed technical guidance, see these reference files:

Data Fetching

Quick Reference

Apollo Client Basics

useQuery for Fetching

useMutation for Updates

Automatic Deduplication

Parallel Queries

Skip Queries Conditionally

Polling

Optimistic Updates

Cache Updates

Error Handling

Lazy Queries

Fetching in Components vs Hooks

In Components (Simple)

In Hooks (Reusable Logic)

Event Listener Deduplication

Caching Strategies

Cache-First (Default)

Network-Only (Fresh Data)

Cache-and-Network (Background Refresh)

Related Documentation

Reference Files

Architecture / File Organization

Working on features / Component Patterns

Data Fetching

Quick Reference

Apollo Client Basics

useQuery for Fetching

useMutation for Updates

Automatic Deduplication

Parallel Queries

Skip Queries Conditionally

Polling

Optimistic Updates

Cache Updates

Error Handling

Lazy Queries

Fetching in Components vs Hooks

In Components (Simple)

In Hooks (Reusable Logic)

Event Listener Deduplication

Caching Strategies

Cache-First (Default)

Network-Only (Fresh Data)

Cache-and-Network (Background Refresh)

Related Documentation

Reference Files

Architecture / File Organization

Working on features / Component Patterns