Apollo GraphQL查询间缓存共享异常问题求助

问题背景 #

刚接触Apollo GraphQL，为优化性能，计划通过单次查询获取表格全量数据并缓存，让单元格组件仅通过DataType的ID从缓存读取liveValue（便于测试阶段Mock）。已完成以下配置：

• 定义包含DataType、Channel的GraphQL Schema
• 实现两个查询：TABLE_QUERY拉取全量渠道和数据类型，CELL_QUERY通过ID查询单个DataType的liveValue
• React组件结构：App组件用TABLE_QUERY（轮询+network-only）拉取数据，Row组件用CELL_QUERY（轮询+cache-only）从缓存读取数据
• 配置缓存重定向规则后，Apollo DevTools显示缓存已正常归一化，但Row组件仍发起独立网络请求，无法复用缓存

关键问题分析 #

核心冲突点在于轮询配置与cache-only策略的矛盾：

• Row组件的useQuery同时设置了pollInterval:5000和fetchPolicy:'cache-only'，轮询机制会忽略cache-only策略，强制发起网络请求
• 缓存重定向的read方法虽返回正确引用，但轮询优先级更高，导致缓存复用失效

修复方案 #

1. 移除Row组件的轮询配置：App组件已通过轮询更新全量缓存，Row组件只需监听缓存变化即可自动更新，无需独立轮询
2. 简化缓存配置（可选）：DataType的keyFields默认值为id，可省略该配置项

修正后的代码示例 #

修正后的Row组件 #

const Row = (props: {id: string}) => {
    const { data} = useQuery<CellResponse>(CELL_QUERY, {
        fetchPolicy: 'cache-only',
        variables: {typeID: props.id}
    });

    return <h6>{`${props.id}: ${data?.dataType.liveValue ?? '-'}`}</h6>;
}

简化后的缓存配置 #

new InMemoryCache({
    typePolicies: {
        Query: {
            fields: {
                dataType: {
                    read(_, {args, toReference}) {
                        return toReference({__typename: 'DataType', id: args?.id});
                    }
                }
            }
        }
    }
})

原理说明 #

• App组件通过network-only+轮询，定期从服务器拉取全量数据并更新归一化缓存
• Row组件使用cache-only策略，直接从缓存中读取对应ID的DataType数据
• 当缓存被App组件的轮询更新时，Row组件会自动感知缓存变化并重新渲染，无需发起网络请求

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