如何让Apollo Client直接更新缓存中原有国家数组的条目？

问题原因 #

Apollo Client的缓存采用规范化存储：每个对象会以__typename+唯一标识字段（比如Country的code）作为键单独存储，而查询返回的数组只是保存这些对象的引用。你之前用writeQuery操作的是带code参数的countries查询，缓存会新增这条查询的结果条目，但不会更新原有全量国家数组里的对象引用，也不会修改共享的Country对象本身。

解决方案 #

推荐两种高效的修改方式：

方法一：直接修改缓存中的目标对象（推荐） #

使用cache.modify()直接定位到缓存里的Country对象并修改字段，所有引用该对象的查询（包括全量国家数组）都会自动同步更新：

client.cache.modify({
  // 生成目标对象的唯一缓存ID：__typename + 唯一标识字段（code）
  id: client.cache.identify({ __typename: 'Country', code: 'AD' }),
  fields: {
    // 修改name字段，返回新值
    name() {
      return 'test';
    },
    // 如果需要修改其他字段，继续添加即可
  },
});

方法二：更新全量国家数组的缓存 #

如果你需要显式更新原全量查询的缓存结果（一般不需要，因为对象引用更新后数组会自动同步），可以先读取原查询数据，修改对应元素后写回：

// 1. 读取原全量国家查询的缓存
const { countries } = client.readQuery({
  query: gql`
    query GetAllCountries {
      countries {
        __typename
        code
        name
        // 这里要包含原查询返回的所有字段，避免写回时丢失数据
      }
    }
  `
});

// 2. 找到目标国家并修改
const updatedCountries = countries.map(country => 
  country.code === 'AD' ? { ...country, name: 'test' } : country
);

// 3. 将修改后的数组写回缓存
client.writeQuery({
  query: gql`
    query GetAllCountries {
      countries {
        __typename
        code
        name
        // 与读取时保持一致的字段列表
      }
    }
  `,
  data: { countries: updatedCountries }
});

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