突变后 Apollo 缓存未更新答案

【问题标题】：Apollo cache is not updating after the mutation突变后 Apollo 缓存未更新
【发布时间】：2020-05-09 09:09:47
【问题描述】：

突变后 Apollo 缓存没有更新，我不想手动访问缓存，所以 writeQuery 和 readQuery 方法更新缓存是不可能的。使用 readQuery 和 writeQuery 的 update 方法正在更新缓存，但这不是我希望它更新的方式。我希望它自动更新。我也使用了 refetchQueries，调用了 API，我从服务器获取新数据作为响应，但它没有更新缓存并且缓存仍然有旧数据。我在执行突变后调用查询来获取新数据，但它从缓存中返回了陈旧的数据。 fetch-policy 是 缓存和网络。这是我想要的工作方式：执行突变后，我将向服务器调用查询以获取新数据，它应该使用新数据更新缓存。

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)
        )
    }

【问题讨论】：

标签： vue.js vue-apollo

【解决方案1】：

不要使用 this.$apollo.query() 而是使用 this.$apollo.watchQuery()

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

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

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

更多信息请阅读docs

      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)
        });
    }

【讨论】：

乐于助人:)