Cache First vs Network Only in Apollo: Key Differences and Usage

In Apollo Client, cache-first tries to read data from the cache first and only fetches from the network if the data is missing, making it fast and efficient. network-only always fetches fresh data from the server, ignoring the cache, ensuring up-to-date results but with more network usage.

Quick Comparison

This table summarizes the main differences between cache-first and network-only fetch policies in Apollo Client.

Factor	Cache First	Network Only
Data Source	Reads from cache first, then network if needed	Always fetches from network, ignores cache
Performance	Faster due to cache usage	Slower due to network request every time
Data Freshness	May show stale data if cache is outdated	Always fresh data from server
Network Usage	Less network traffic	More network traffic
Use Case	Good for mostly static data	Good for frequently changing data
Cache Update	Updates cache after network fetch if needed	Updates cache with fresh data

Key Differences

The cache-first policy prioritizes speed by checking if the requested data is already stored in Apollo Client's cache. If the data exists, it returns it immediately without making a network request. This reduces loading times and network usage, making it ideal for data that does not change often.

On the other hand, network-only bypasses the cache completely and always sends a request to the server. This ensures the data is always the latest but can slow down the app due to waiting for the network response. It also increases network traffic.

Both policies update the cache after fetching from the network, but cache-first only fetches if the cache is empty or missing the data, while network-only fetches every time regardless of cache state.

Code Comparison

Here is how you use cache-first in Apollo Client to fetch a GraphQL query:

javascript

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

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

function User({ id }) {
  const { loading, error, data } = useQuery(GET_USER, {
    variables: { id },
    fetchPolicy: 'cache-first'
  });

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

  return <div>{data.user.name} - {data.user.email}</div>;
}

Output

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

Network Only Equivalent

This example shows the same query using the network-only fetch policy to always get fresh data from the server:

javascript

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

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

function User({ id }) {
  const { loading, error, data } = useQuery(GET_USER, {
    variables: { id },
    fetchPolicy: 'network-only'
  });

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

  return <div>{data.user.name} - {data.user.email}</div>;
}

Output

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

When to Use Which

Choose cache-first when your data changes infrequently and you want faster load times with less network usage, such as for static content or user preferences.

Choose network-only when you need the most up-to-date data every time, like live feeds, notifications, or rapidly changing information where stale data is unacceptable.

Using the right fetch policy helps balance performance and data freshness based on your app's needs.

Key Takeaways

Cache First fetches from cache first, then network if needed, improving speed and reducing network calls.

Network Only always fetches fresh data from the server, ensuring up-to-date results but increasing network usage.

Cache First is best for mostly static data, Network Only for frequently changing data.

Both update the cache after network fetch, but differ in when they fetch from the network.

Choose fetch policy based on your app's need for speed versus data freshness.