因此,我在React Apollo应用程序上有一个可以添加或更新用户的表单。接收数据时,如果用户存在,则Apollo会知道该信息并正确合并/规范化数据。
如果不是,它什么也没做,我需要像这样手动添加它:
const result = await this.props.upsertPersonMutation({
variables: {
...this.state.fields,
},
update: (store, { data }) => {
// somewhere in here I'll need to check if it's new or not
const initDataQuery = store.readQuery({query: INIT_DATA});
const { upsertPersonMutation } = data;
initDataQuery.getInitData.user.people.push(upsertPersonMutation)
store.writeQuery({query: INIT_DATA, data: initDataQuery})
}
}).then(response => {
this.setState({
isLoading: false
});
this.props.closeCallback();
})
虽然令我印象深刻的是它能够执行前一个操作,但为什么不能将新条目附加到数组上呢?我觉得,如果仅解决一半问题,也许就无法达到目的,知道吗?
答案 0 :(得分:1)
之所以发生这种情况,是因为执行突变后,阿波罗客户端会检查阿波罗缓存中是否有任何具有相同标识符键的项目。如果有,它将自动更新。阿波罗称这些更新为Automatic Cache Updates。
如果高速缓存中没有与突变结果匹配的内容,则apollo客户端不会添加它。显式使用了变异来变异对象,并使用查询来获取它们。使用update
函数是通过突变添加它的方法。
默认情况下,标识符键为<__typename>:<id>
,<__typename>:<_id>
或访问对象的路径。阅读此链接以了解有关how Apollo normalizes the cache的更多信息。