React搭配Apollo缓存时路由跳转后新增数据不显示如何解决？

以下方案均基于Apollo Client原生能力实现，无需引入额外依赖：

方案1：Mutation成功后手动更新缓存（首推，零额外请求） #

这是性能最优的方案，新增数据成功后直接修改本地缓存，无需重新发起查询，回退后直接读取最新缓存即可：

// 新增Place的Mutation调用逻辑
const [addPlace] = useMutation(ADD_PLACE_MUTATION, {
  update(cache, { data: { addPlace } }) {
    // 读取缓存中当前餐厅的场地列表数据
    const { places } = cache.readQuery({
      query: GET_RESTAURANT_PLACES_QUERY,
      variables: { restaurantName: 'france_res' } // 替换为当前页面对应的餐厅名称变量
    });
    // 将新增的place插入缓存列表后回写
    cache.writeQuery({
      query: GET_RESTAURANT_PLACES_QUERY,
      variables: { restaurantName: 'france_res' },
      data: { places: [...places, addPlace] }
    });
  }
})

方案2：新增后主动触发关联查询重拉 #

如果不想手动处理缓存结构，可以在Mutation成功后调用refetchQueries指定要刷新的查询：

const [addPlace] = useMutation(ADD_PLACE_MUTATION, {
  refetchQueries: [
    { query: GET_RESTAURANT_PLACES_QUERY, variables: { restaurantName: 'france_res' } }
    // 也可以直接填写查询的operation name，比如 'GetRestaurantPlaces'
  ],
  // 可选配置：等待重拉完成再跳转，避免回退后短暂显示旧数据
  awaitRefetchQueries: true
})

方案3：列表页配置查询策略（无需修改新增逻辑） #

如果不想改动新增逻辑，可以给列表页的查询设置更灵活的拉取策略，兼顾缓存优势和数据新鲜度：

• 配置fetchPolicy: 'cache-and-network'：优先返回缓存数据快速渲染，同时后台发起请求拉取最新数据，请求完成后自动更新UI
• 也可以配置refetchOnMount: true：每次列表页组件挂载时（用户从详情页回退时会触发），自动发起查询更新缓存

// 列表页的查询代码
const { data, loading } = useQuery(GET_RESTAURANT_PLACES_QUERY, {
  variables: { restaurantName },
  fetchPolicy: 'cache-and-network',
  // 或使用 refetchOnMount: true，仅在组件挂载时拉取最新数据
})

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