变异后的Apollo缓存未更新

Posted 2023-01-25

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

答案

而不是使用this。$ apollo.query（），而是使用this。$ apollo.watchQuery（），watchQuery方法返回一个QueryRef对象，该对象的value changes属性为Observable。当查询完成时，observable将仅发出一次，并且除非您将watchQuery参数notifyOnNetworkStatusChange设置为true，否则加载将设置为false。查询完成后，它还将包含一个数据对象。因此，如果其他查询获取新信息，则此组件将更新以保持一致。有关更多信息，请阅读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)
        );