如何根据特定参数选择性关闭Apollo缓存

你的问题核心在于：动态修改fetchPolicy后，Apollo Client并未按预期切换缓存策略。这是因为原代码中useLazyQuery的初始化选项未与动态变化的fetchPolicy建立可靠的绑定，且useEffect的依赖列表遗漏了fetchPolicy，导致策略变更时不会触发重新查询。

修复方案 #

修改useStoreApolloClient Hook，确保每次调用getData时都传入当前的fetchPolicy，并将fetchPolicy加入useEffect的依赖列表：

import { getItem } from 'utilities/sessionStorage';
import { useMemo } from 'react';

const useStoreApolloClient = ({ query, parameters = {}, fetchPolicy = 'cache-first' }) => {
    const { store: storeId, timezone } = getItem(userInfo, true);

    // 缓存variables对象，避免不必要的useLazyQuery重初始化
    const variables = useMemo(() => ({
        storeId,
        timezone,
        ...parameters
    }), [storeId, timezone, parameters]);

    const [getData, { data, error, loading }] = useLazyQuery(query);

    useEffect(() => {
        if (!error) {
            // 显式传入当前的variables和fetchPolicy
            getData({ variables, fetchPolicy });
        }
    }, [getData, error, variables, fetchPolicy]); // 加入fetchPolicy作为依赖

    // 暴露的getData函数也携带最新的配置
    return {
        data,
        error,
        getData: (customOptions = {}) => getData({ variables, fetchPolicy, ...customOptions }),
        loading
    };
};

关键修改点 #

1. 显式传递fetchPolicy：每次调用getData时直接传入当前的fetchPolicy，确保查询使用最新的缓存策略，而非依赖useLazyQuery初始化时的固定配置。
2. 缓存variables对象：使用useMemo缓存变量对象，避免因参数引用变化导致useLazyQuery频繁重初始化。
3. 更新useEffect依赖：将fetchPolicy和variables加入依赖列表，确保策略或参数变化时自动触发重新查询。

验证 #

修改后，当timePeriod变为"D"时，fetchPolicy会切换为"no-cache"，useEffect会立即触发新的查询，完全绕过缓存；其他情况下则使用默认的"cache-first"策略。

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