如何在方法中使用的 vue apollo 查询中重新获取/更新结果答案

【问题标题】：How to refetch / update result in vue apollo query that used in a method如何在方法中使用的 vue apollo 查询中重新获取/更新结果
【发布时间】：2019-08-30 07:43:54
【问题描述】：

我想更新或重新获取在方法（不是 apollo 对象）中使用的 apollo 查询中的数据。问题是我想在特定事件之后查询和更新该查询，所以我不能在我的代码中直接使用 apollo 对象。

methods: {
    async fetchEvents() {
      const { data } = await this.$apollo.query({
        query: gql`
            query(
              $someThing: Int,
            ) {
                events (
                  someThing: $someThing,
                ) {
                    total
                    items {
                     ...
                    }
                }
            }
        `,
        variables() {
          return {
            ...
          };
        },
      });
      this.data = data;
    },
  },


  watch: {
    'items.view.organizerId': function callback() {
      this.fetchEvents();
    },
    eventsSearchInputVal: function callback() {
      this.fetchEvents();
    },
    'pagination.statusFilter': function callback() {
      this.fetchEvents();
    },
  },

总之，当watch 中的pagination.statusFilter 或eventsSearchInputVal 或items.view.organizerId 发生更改时，应重新获取查询。在这段代码中，当这些变量发生变化时，什么都不会发生。

【问题讨论】：

标签： javascript vue.js graphql apollo vue-apollo

【解决方案1】：

我不知道为什么，但我已将 variables() 方法更改为一个对象并且它得到了修复。所以这段代码现在可以工作了：

methods: {
    async fetchEvents() {
      const { data } = await this.$apollo.query({
        query: gql`
            query(
              $someThing: Int,
            ) {
                events (
                  someThing: $someThing,
                ) {
                    total
                    items {
                     ...
                    }
                }
            }
        `,
        variables: { // this is an object now
            ...
        },
      });
      this.data = data;
    },
  },


  watch: {
    'items.view.organizerId': function callback() {
      this.fetchEvents();
    },
    eventsSearchInputVal: function callback() {
      this.fetchEvents();
    },
    'pagination.statusFilter': function callback() {
      this.fetchEvents();
    },
  },

【讨论】：