在 vuejs 中缓冲的 Apollo/graphql 请求结果

如何解决在 vuejs 中缓冲的 Apollo/graphql 请求结果

在控制用户订阅时事通讯的 Vue 组件中，我有合作代码：

async newSubscriber(event) {
  // Validate email
  //---------------
  if (!this.isEmailValid(this.subscriber_email))
      this.subscribeResult = "Email not valid";
  else {
    // If valid,check if email is not already recorded
    //-------------------------------------------------
    let alreadyRecorded = false;
    let recordedEmails = await this.$apollo.query({ query: gql`query { newslettersEmails { email } }` });
    console.log('length ' + recordedEmails.data.newslettersEmails.length);
    console.log(recordedEmails.data.newslettersEmails);
    for (let i = 0; !alreadyRecorded && i < recordedEmails.data.newslettersEmails.length; i++)
      alreadyRecorded = this.subscriber_email === recordedEmails.data.newslettersEmails[i].email;
    if (alreadyRecorded)
      this.subscribeResult = "Email already recorded";
    else {
      // If not,record it and warn the user
      //------------------------------------
      this.$apollo.mutate({
        mutation: gql`mutation ($subscriber_email: String!){
          createNewslettersEmail(input: { data: { email: $subscriber_email } }) {
            newslettersEmail {
              email
            }
          }
        }`,variables: {
          subscriber_email: this.subscriber_email,}
      })
      .then((data) => { this.subscribeResult = "Email recorded"; })
      .catch((error) => { this.subscribeResult = "Error recording the email: " + error.graphQLErrors[0].message; });
    }
  }
}

在第一次电子邮件订阅测试中，$apollo.query 向我返回已记录的正确电子邮件数量（假设为 10）并记录新订阅者电子邮件。但是，如果我尝试在没有硬刷新 (F5) 浏览器的情况下记录第二封电子邮件，$apollo.query 返回的结果与第一次 (10) 完全相同，即使第一封测试电子邮件已被 Strapi (graphql) 正确记录palyground 向我展示了添加的带有相同查询的电子邮件！）。即使我添加了 10 封电子邮件，apollo 也总是会返回它在第一次调用时得到的信息（10 封记录的电子邮件），就好像它使用了缓冲结果一样。当然，这允许 Vue 多次记录同一封电子邮件，我显然想避免这种情况！

它对任何人说话吗？

解决方法

经过大量的谷歌挖掘（通过简单地改变我的请求来给出想要的结果，最后，通过“缓存”来“缓冲”！），我明白阿波罗默认缓存它的查询（至少，在我收到的 Vue 项目的配置）。为了解决这个问题，我刚刚在查询中添加了“fetchPolicy: 'network-only'”：

let recordedEmails = await this.$apollo.query({
  query: gql`query { newslettersEmails { email } }`,});

变成了

let recordedEmails = await this.$apollo.query({
  query: gql`query { newslettersEmails { email } }`,fetchPolicy: 'network-only'
});

问题解决了^^