React Apollo Query与Mutation组件无法获取最新数据求助

我来帮你搞定这个Mutation执行后Query不刷新的问题！之前你试过pollInterval和更新缓存但没成功，大概率是写法细节没到位，给你几个靠谱的解决方案：

一、优先用Mutation的update函数手动更新缓存 #

这是最高效的方式，比轮询更精准。你之前可能没写对缓存读写的逻辑，给你完整的示例：

首先确保你的Mutation返回字段和Query需要的字段完全匹配，然后在update函数里读取现有缓存、更新数据、再写回缓存：

const CREATE_FIELD = gql`
  mutation fieldCreate($formID: String!, $fieldInput: FieldInput!) {
    fieldCreate(formID: $formID, input: $fieldInput) {
      fieldID
      formID
      // 这里要包含Query里所有需要的字段，不能漏
    }
  }
`;

// 组件里使用Mutation的正确写法
<Mutation
  mutation={CREATE_FIELD}
  update={(cache, { data: { fieldCreate } }) => {
    // 1. 读取缓存中已有的Query数据，变量必须和Query组件用的完全一致
    const { field } = cache.readQuery({
      query: GET_FIELD_BY_FORM_ID,
      variables: { formID: "你的目标表单ID" }
    });

    // 2. 更新数据：如果field是数组就追加新字段，是单个对象就直接替换
    const updatedFields = [...field, fieldCreate];

    // 3. 把更新后的数据写回缓存
    cache.writeQuery({
      query: GET_FIELD_BY_FORM_ID,
      variables: { formID: "你的目标表单ID" },
      data: { field: updatedFields }
    });
  }}
>
  {(createField) => (
    <button onClick={() => createField({
      variables: {
        formID: "xxx",
        fieldInput: {/* 你的字段输入数据 */}
      }
    })}>
      创建字段
    </button>
  )}
</Mutation>

⚠️ 注意：readQuery和writeQuery的变量必须和<Query>组件使用的完全一致，不然缓存找不到对应的数据；Mutation返回的字段也必须和Query的字段一一对应，否则更新后会出现数据缺失。

二、用refetchQueries强制刷新指定Query #

如果手动更新缓存太麻烦（比如数据结构复杂），可以让Apollo在Mutation成功后直接重新执行一次Query：

<Mutation
  mutation={CREATE_FIELD}
  refetchQueries={[{
    query: GET_FIELD_BY_FORM_ID,
    variables: { formID: "你的目标表单ID" } // 同样要匹配变量
  }]}
>
  {(createField) => (...)}
</Mutation>

这个方法简单直接，但会多发起一次网络请求，适合快速解决问题的场景。

三、修正pollInterval的使用问题 #

你之前设置的pollInterval="500"是字符串类型，应该传数字pollInterval={500}。不过轮询是被动定时刷新，不是Mutation后立即更新，只适合实时性要求不高的场景：

<Query
  query={GET_FIELD_BY_FORM_ID}
  variables={{ formID: "xxx" }}
  pollInterval={500} // 这里是数字，不是字符串
>
  {({ loading, error, data }) => (...)}
</Query>

四、检查缓存主键配置 #

Apollo缓存是通过__typename+主键识别数据的，确保你的GraphQL Schema里给Field类型设置了正确的主键，比如：

type Field @key(fields: "fieldID") {
  fieldID: ID!
  formID: String!
  // 其他字段
}

如果没有主键，缓存可能无法正确识别新创建的数据，导致更新失效。

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