突变后，阿波罗缓存未更新

Question

Apollo 缓存在突变后没有更新，我不想手动访问缓存，所以 writeQuery 和 readQuery 方法来更新缓存是出局的。 使用readQuery和writeQuery的更新方法正在更新缓存，但这不是我希望它更新的方式。我希望它自动更新。 我也使用了refetchQuery，调用了API，我从服务器获取新数据作为响应，但它没有更新缓存，缓存仍然有旧数据。 我在执行突变后调用查询以获取新数据，但它从缓存中返回了陈旧数据。获取策略是缓存和网络。 以下是我希望事情如何工作： 执行突变后，我将调用对服务器的查询以获取新数据，它应该使用新数据更新缓存。

async deleteFamilyMember () {
await this.$apollo
.mutate({
mutation: DELETE_FAMILY_MEMBER,
variables: {
familyMemberId: this.memberToDelete
}
})
.then(response => {
this.getFamilyMembers()
})
.catch(err => console.log(err))
}
async getFamilyMembers () {
await this.$apollo
.query({
query: FAMILY_MEMBERS
})
.then(response => {
this.familyMembers = response.data.familyMembers
this.$store.commit('SET_FAMILY_MEMBERS', response.data.familyMembers)
})
.catch(err =>
console.log('Error fetching family members details', err)
)
}

Answer 1

不要使用 this.$apollo.query(( 请使用 this.$apollo.watchQuery((

watchQuery 方法返回一个 QueryRef 对象，该对象具有 Observable 的值更改属性。

查询完成后，可观察量只会发出一次，并且加载将设置为 false，除非您将 watchQuery 参数 notifyOnNetworkStatusChange 设置为 true。查询完成后，它还将包含一个数据对象。

因此，如果其他查询获取新信息，此组件将更新以保持一致。

如需更多内容，请阅读文档

await this.$apollo
.watchQuery({
query: FAMILY_MEMBERS
})
.subscribe({
next: ({ data }) => {
console.log("DATA", data);
this.familyMembers = data.familyMembers;
this.$store.commit(SET_FAMILY_MEMBERS, data.familyMembers);
},
error: e => console.error("Error fetching family members details", e)
});
}