Fetch Policies in Apollo: What They Are and How They Work

In Apollo, fetch policies control how the client retrieves data, deciding whether to use cached data or fetch fresh data from the server. They help balance speed and data freshness by specifying rules like cache-first, network-only, and cache-and-network.

How It Works

Fetch policies in Apollo act like traffic rules for your data requests. Imagine you want to get information from a library. Sometimes you check your personal notes (cache) first to save time, and other times you go directly to the library shelves (network) to get the latest book. Apollo's fetch policies decide when to use your notes or when to fetch new data.

For example, the cache-first policy looks at your saved data first and only asks the server if nothing is found. The network-only policy always goes to the server, ignoring saved data. This system helps your app be fast and up-to-date by choosing the right source for data each time.

Example

This example shows how to set a fetch policy in an Apollo Client query to use cache-and-network, which returns cached data immediately and updates it with fresh data from the server.

javascript

import { gql, useQuery } from '@apollo/client';

const GET_USER = gql`
  query GetUser($id: ID!) {
    user(id: $id) {
      id
      name
      email
    }
  }
`;

function UserProfile({ userId }) {
  const { data, loading, error } = useQuery(GET_USER, {
    variables: { id: userId },
    fetchPolicy: 'cache-and-network'
  });

  if (loading && !data) return 'Loading...';
  if (error) return `Error: ${error.message}`;

  return (
    <div>
      <h2>{data.user.name}</h2>
      <p>{data.user.email}</p>
    </div>
  );
}

Output

<div>
  <h2>John Doe</h2>
  <p>[e-mail]</p>
</div>

When to Use

Use fetch policies to control how your app balances speed and fresh data. For example:

• cache-first: Best when data rarely changes, so your app loads fast using cached data.
• network-only: Use when you always need the latest data, like live updates or sensitive info.
• cache-and-network: Good for showing cached data quickly while updating it in the background.
• no-cache: When you want to fetch data but not save it, useful for one-time requests.

Choosing the right fetch policy depends on your app’s needs for speed, freshness, and user experience.

Key Points

• Fetch policies decide whether to use cached data or fetch fresh data.
• cache-first is the default and prioritizes cached data.
• network-only always fetches from the server, ignoring cache.
• cache-and-network returns cached data immediately and updates it from the server.
• Choosing the right policy improves app speed and data accuracy.

Key Takeaways

Fetch policies control how Apollo Client uses cache versus network for data fetching.

Use cache-first for fast loads with mostly static data.

Use network-only to always get fresh data from the server.

Cache-and-network shows cached data immediately and refreshes it in the background.

Selecting the right fetch policy improves app performance and user experience.