如何在方法中使用的vue阿波罗查询中重新提取/更新结果

时间:2019-04-09 05:24:49

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

我想在方法(不是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();
    },
  },

最后,当pagination.statusFilter中的eventsSearchInputValitems.view.organizerIdwatch更改时,查询应重新获取。在这些代码中,当这些变量被更改时,什么也不会发生。

1 个答案:

答案 0 :(得分:0)

我不知道为什么,但是我已经将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();
    },
  },