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

Question

I want to update or refetch data in apollo query that used in a method (not apollo object). the thing is i wanted to query and update that query after specific event, so i couldn't use apollo object directly in in my code.

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();
    },
  },

in conclusion when pagination.statusFilter or eventsSearchInputVal or items.view.organizerId in watch got changed the query should refetch. in this code nothing happen when those variables get changed.

Answer 1

i don't know why but I've changed variables() method to an object and it got fixed. so this code is now working:

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();
    },
  },