Apollo 5: Fetch Policies
easy⏱ 5 mincourseapollo
The 6 fetch policies
Apollo offers six fetch policies:
- cache-first (default): Returns cache if available, otherwise fetches from network.
- cache-and-network: Returns cache immediately AND fetches from network to update.
- network-only: Always fetches from network, then writes to cache.
- no-cache: Always fetches from network, never reads or writes cache.
- cache-only: Only reads from cache, never contacts network.
- standby: Like
cache-first but won't auto-update on cache changes.
Choose based on how stale your data can be.
// Always fresh from server
useQuery(GET_NOTIFICATIONS, {
fetchPolicy: 'network-only',
});
// Cache first, then background update
useQuery(GET_USER_PROFILE, {
fetchPolicy: 'cache-and-network',
});
Switch between policies
Create a DataViewer component with a useState to track the selected fetchPolicy. Render buttons for at least cache-first, network-only, and cache-and-network. Pass the selected policy to useQuery(GET_DATA, { fetchPolicy }). Display the data and show which policy is active.
Decision table
Use this decision table:
- Static config/enums →
cache-first (default)
- User profile data →
cache-and-network (show cached, update in bg)
- Real-time feeds →
network-only (always fresh)
- Sensitive one-time data →
no-cache (don't persist)
- Offline-first apps →
cache-first with manual refetch
nextFetchPolicy optimization
Use nextFetchPolicy to change policy after the first fetch. Common pattern: first render uses network-only to ensure fresh data, then switches to cache-first for subsequent renders: { fetchPolicy: 'network-only', nextFetchPolicy: 'cache-first' }. This gives you the best of both worlds — guaranteed fresh initial load, then fast cache reads.
useQuery(GET_DASHBOARD, {
fetchPolicy: 'network-only',
nextFetchPolicy: 'cache-first',
});