突变后 Apollo 缓存未更新

Question

Apollo 缓存在突变后没有更新，我不想手动访问缓存，因此无法使用 writeQuery 和 readQuery 方法来更新缓存。 readQuery 和 writeQuery 的更新方法正在更新缓存，但这不是我希望它更新的方式。我希望它自动更新。我也使用了 refetchQueries，调用了 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 方法 returns 一个 QueryRef 对象，其值更改属性是一个 Observable。

observable 只会在查询完成时发出一次，加载将设置为 false，除非您将 watchQuery 参数 notifyOnNetworkStatusChange 设置为 true.Once 查询已完成，它还将包含一个数据对象。

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

阅读更多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)
        });
    }

突变后 Apollo 缓存未更新

Apollo cache is not updating after the mutation

vue.js

vue-apollo