GQL响应是否为只读？若是，导致该特性的原因是什么？

首先明确：GraphQL 规范本身并没有强制要求响应数据是只读的，但你遇到的这个问题是Apollo Client的默认行为导致的——它返回的查询响应数据默认是被冻结（不可修改）的。

为什么Apollo Client要这么做？ #

Apollo Client的核心设计目标之一是维护一个一致、可预测的缓存，而不可变性是实现这个目标的关键：

• 直接修改缓存中的原始数据会导致缓存状态和UI展示不一致，而且很难追踪数据变化的来源，调试起来非常麻烦。
• 不可变的数据模式能让React、Angular这类框架更高效地检测数据变化，通过引用比较就能快速决定是否需要重渲染组件，提升应用性能。
• Apollo Client内部会使用类似Object.freeze()的方法冻结查询返回的响应对象，确保你不会意外修改缓存中的原始数据。

你的错误场景分析 #

你尝试直接修改Apollo查询返回的data.data.id，代码如下：

constructor(private apollo: Apollo) {} 
ngOnInit(){ 
  /* -- apollo query setup--- */ 
  const subscriber = this.apollo.query<any>(this.options); 
  subscriber.subscribe((data) => { 
    data.data.id = 'demo' 
  }) 
}

因为data.data是被Apollo冻结的只读对象，所以触发了这个错误：

Uncaught (in promise): TypeError: Cannot assign to read only property 'id' of object '[object Object]'
TypeError: Cannot assign to read only property 'id' of object '[object Object]'

解决方法 #

根据你的需求，有两种常见的处理方式：

1. 仅修改本地使用的数据（不更新缓存）

如果只是想在组件中使用修改后的数据，不需要更新Apollo缓存，你可以通过复制原始数据创建一个新对象，再修改新对象：

subscriber.subscribe(({ data }) => {
  // 使用展开运算符复制对象
  const modifiedData = { ...data, id: 'demo' };
  // 后续使用modifiedData即可，原始缓存数据不受影响
});

如果数据是嵌套结构，可能需要深度复制（比如使用structuredClone或者第三方库如Lodash的cloneDeep）。

2. 需要更新Apollo缓存中的数据

如果你希望修改后的数据同步到缓存，让其他组件也能获取到更新后的数据，应该使用Apollo Client提供的官方方法来更新缓存，比如writeQuery：

import { YOUR_QUERY } from './your-queries'; // 导入你的查询语句

this.apollo.query<any>(this.options).subscribe(({ data }) => {
  this.apollo.cache.writeQuery({
    query: YOUR_QUERY,
    variables: this.options.variables, // 匹配查询的变量（如果有的话）
    data: { ...data, id: 'demo' }
  });
});

这样修改后，Apollo会更新缓存，并且自动通知相关组件重新获取数据，保证状态一致。

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