Apollo Client本地存嵌套数据：useMutation失效？writeQuery最优？

一、useMutation方案失效的原因 #

1. 缺少本地Mutation Resolver
   Apollo Client的本地Mutation不像writeQuery直接操作缓存，必须定义对应的Resolver函数来处理数据修改逻辑。你只添加了TypeDefs但没有配置Resolver，调用Mutation后没有实际修改缓存的代码执行，自然看不到数据变化。

2. Mutation定义与TypeDefs不匹配
   你的TypeDefs中定义的Mutation字段是：

type Mutation {
    displayGroup(id: Int!): DisplayGroup
}

但实际使用的DISPLAY_GROUP_MUTATION_2里，Mutation字段是displayGroup，还传入了alias、name参数，和TypeDefs中仅接受id: Int!的定义完全不符，Apollo无法找到对应的处理逻辑。

3. 缓存更新逻辑缺失
   即使Resolver存在，也需要在其中手动调用cache.writeQuery或cache.modify来更新缓存数据，否则Mutation执行后缓存不会同步变化。

二、writeQuery是否是本地存储嵌套数据的最优方案？ #

writeQuery是直接操作Apollo缓存的方式，适合简单、一次性的嵌套数据写入/全量更新场景，优势在于：

• 无需额外定义TypeDefs和Resolver，开箱即用
• 逻辑直观，只要Query结构与缓存数据匹配就能生效

但它也有明显局限：

• 处理局部修改（比如只改嵌套数组里某一项的某个字段）时，需要手动拼接完整的嵌套数据结构，代码繁琐且容易出错
• 缺乏封装性，多个组件更新同一份数据时会出现重复代码

如果你的场景需要频繁修改嵌套数据的局部内容，更推荐：

• 结合Reactive Variables + cache.modify：用Reactive Variables存储数据，通过cache.modify同步更新缓存
• 封装本地Mutation Resolver：把更新逻辑集中在Resolver里，组件只需调用Mutation即可，代码更易维护

三、需要补充的关键点 #

1. 统一数据类型
   你的TypeDefs中把id定义为Int!，但实际数据用的是字符串（比如id: 'display-group'），类型不匹配会导致Apollo缓存处理异常，建议统一改为ID!类型。

2. 配置本地Mutation Resolver
   如果要继续用useMutation实现本地数据修改，必须在ApolloClient初始化时添加Resolver配置，示例：

const resolvers = {
  Mutation: {
    updateDisplayGroup: (_, { id, alias, name }, { cache }) => {
      // 读取当前缓存中的displayGroup数据
      const { displayGroup } = cache.readQuery({ 
        query: gql`query GetDisplayGroup { displayGroup @client { id alias name display } }` 
      });
      // 修改目标字段
      const updatedGroup = { ...displayGroup, id, alias, name };
      // 将修改后的数据写回缓存
      cache.writeQuery({
        query: gql`query GetDisplayGroup { displayGroup @client { id alias name display } }`,
        data: { displayGroup: updatedGroup }
      });
      return updatedGroup;
    }
  }
};

// 初始化ApolloClient时加入resolvers
const client = new ApolloClient({
  uri: '/graphql',
  cache: new InMemoryCache(),
  typeDefs,
  resolvers
});

3. 对齐Mutation定义与TypeDefs
   修改DISPLAY_GROUP_MUTATION_2，让字段名、参数与Resolver和TypeDefs对齐：

const DISPLAY_GROUP_MUTATION_2 = gql`
mutation UpdateDisplayGroup($id: ID!, $alias: String!, $name: String!) {
  updateDisplayGroup(id: $id, alias: $alias, name: $name) @client {
    id
    alias
    name
  }
}

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