Question

突变后的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)
        )
    }

Answer 1

不要使用this。$ apollo.query（）而是使用this。$ apollo.watchQuery（）

watchQuery方法返回一个QueryRef对象，该对象的value更改属性是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)
        });
    }

突变后Apollo缓存未更新

1 个答案: