如何禁用Apollo GraphQL Client的InMemoryCache？缓存禁用无效该排查什么？

Hey there! Let's break down why your cache-disabling attempts might not be sticking, and how to fully turn off Apollo's InMemoryCache for good.

Common Reasons fetchPolicy Changes Aren't Working #

• Missing nextFetchPolicy: If you're using watchQuery, Apollo defaults to nextFetchPolicy: 'cache-first' after the initial request. That means even if you set fetchPolicy: 'network-only' or 'no-cache' upfront, subsequent updates (like component re-mounts or variable changes) will fall back to using cached data. Fix this by pairing the two policies in your query:

  client.watchQuery({
    query: YOUR_QUERY,
    fetchPolicy: 'no-cache',
    nextFetchPolicy: 'no-cache', // Critical for ongoing watch updates
  });
  

• Per-Query vs. Global Settings: If you only set the fetch policy on individual queries, other parts of your app might still use the default cache-first behavior. Enforce network-only requests across your entire app by setting global defaults when initializing the client.
• Mutations Updating the Cache: Even if your queries skip the cache, mutations might still write data to it, which could be picked up by other components. Disable mutation caching by adding fetchPolicy: 'no-cache' to your mutations, or use update: () => {} to prevent cache writes entirely.

How to Fully Disable InMemoryCache #

Apollo Client requires a cache instance, but you can either configure InMemoryCache to ignore all data, or replace it with a minimal custom cache that does nothing:

Option 1: Configure InMemoryCache to Skip All Caching #

This keeps the cache instance but ensures no data is stored or retrieved from it:

import { ApolloClient, InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  uri: 'YOUR_GRAPHQL_ENDPOINT',
  cache: new InMemoryCache({
    typePolicies: {
      // Override all Query fields to force network fetches
      Query: {
        fields: {
          '*': {
            read() {
              return undefined; // Tell Apollo to skip cache reads
            },
            merge(_, incoming) {
              return incoming; // Don't merge new data with cached values
            },
          },
        },
      },
      // Disable caching for all other types/fields
      '*': {
        fields: {
          '*': {
            merge(_, incoming) {
              return incoming;
            },
          },
        },
      },
    },
  }),
  // Set global fetch policies to enforce network-only behavior
  defaultOptions: {
    watchQuery: {
      fetchPolicy: 'no-cache',
      nextFetchPolicy: 'no-cache',
    },
    query: {
      fetchPolicy: 'no-cache',
      nextFetchPolicy: 'no-cache',
    },
    mutate: {
      fetchPolicy: 'no-cache',
    },
  },
});

Option 2: Use a Minimal "No-Op" Custom Cache #

If you want to completely avoid InMemoryCache, create a bare-bones cache that doesn't store any data:

import { ApolloClient } from '@apollo/client';

class NoOpCache {
  read() {}
  write() {}
  restore() { return this; }
  extract() { return {}; }
}

const client = new ApolloClient({
  uri: 'YOUR_GRAPHQL_ENDPOINT',
  cache: new NoOpCache(),
  defaultOptions: {
    watchQuery: {
      fetchPolicy: 'no-cache',
      nextFetchPolicy: 'no-cache',
    },
    query: {
      fetchPolicy: 'no-cache',
      nextFetchPolicy: 'no-cache',
    },
  },
});

Note: Some advanced Apollo features (like subscriptions or optimistic UI) rely on cache functionality, so this option works best if you don't need those tools.

内容的提问来源于stack exchange，提问作者Deepack