Apollo执行Mutation后GetPersonQuery无法获取更新结果

这个问题我之前也碰到过，本质是Apollo Client的缓存机制在作祟——默认情况下，当你发起和之前参数完全一致的查询时，Apollo会直接返回缓存里的旧数据，不会再去服务器拉取最新结果。下面给你几个实用的解决办法：

1. 修改查询的fetchPolicy强制请求服务器 #

你可以在执行GetPersonQuery时，通过fetchPolicy选项绕过缓存，直接从服务器获取最新数据。常用的两个选项：

• network-only：强制请求服务器，同时会用新结果更新缓存
• no-cache：强制请求服务器，但不会更新缓存（适合不需要后续复用缓存的场景）

代码示例：

this.apollo.query({
  query: GetPersonQuery,
  variables: { id: id },
  fetchPolicy: 'network-only' // 根据需求选'network-only'或'no-cache'
})

2. 在Mutation后手动更新缓存 #

这是更高效的方案，不需要额外请求服务器。在子组件执行CreatePersonAcademicExperience mutation时，利用update函数直接修改缓存中GetPersonQuery对应的数据，这样后续查询就能直接拿到更新后的结果。

代码示例：

this.apollo.mutate({
  mutation: CreatePersonAcademicExperience,
  variables: { 
    // 这里传入你的mutation参数，比如personId, academicExperienceData等
  },
  update: (cache, { data: { createPersonAcademicExperience } }) => {
    // 1. 从缓存中读取当前的用户数据
    const { person } = cache.readQuery({
      query: GetPersonQuery,
      variables: { id: id }
    });

    // 2. 更新用户的学术体验列表（假设person有academicExperiences字段）
    const updatedPerson = {
      ...person,
      academicExperiences: [...person.academicExperiences, createPersonAcademicExperience]
    };

    // 3. 将更新后的数据写回缓存
    cache.writeQuery({
      query: GetPersonQuery,
      variables: { id: id },
      data: { person: updatedPerson }
    });
  }
})

3. 使用refetchQueries自动重新执行查询 #

如果你不想手动操作缓存，可以在mutation完成后，指定refetchQueries让Apollo自动重新执行GetPersonQuery，从而获取最新数据。

代码示例：

this.apollo.mutate({
  mutation: CreatePersonAcademicExperience,
  variables: { 
    // 你的mutation参数
  },
  refetchQueries: [
    { query: GetPersonQuery, variables: { id: id } }
  ]
})

方法对比 #

• fetchPolicy：简单粗暴，适合需要强制刷新的场景，但会增加服务器请求次数
• 手动更新缓存：性能最优，减少服务器请求，但需要你明确知道缓存数据的结构来修改
• refetchQueries：介于两者之间，实现简单，不需要操作缓存，但同样会发起额外请求

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