Vue-apollo: pollInterval reactivity

[joelmandell]

Hey!
I am trying to define pollInterval on a query to a property on the data object.

        runningTasks: {
            query: gql`{          
               runningTasks {
                    done
                    meta
                    status
                    information
                    err
                }
            }`,
            pollInterval: this.poll,
            fetchPolicy:'network-only',
        },

But I get this error:

"Cannot read property 'poll' of undefined"

What am I doing wrong?

[dehypnosis]

First of all, maybe this at your code scope points global/head variable.
And I think that It seems pollInterval in smart query cannot be reactive currently.
Can use this.$apollo.queries.startPolling(ms) / stopPolling() while watching component properties.

[joelmandell]

Okay, got the point.
Could it be possible to do it like a reactive query in a future feature request?

@Akryum would it be possible to implement this?:

featuredTag: {
  pollInterval() {
   //reactive pollInterval.
   return this.interval
  },
  query () {
    // Here you can access the component instance with 'this'
    if (this.showTag === 'random') {
      return gql`{
        randomTag {
          id
        }
      }`
    } else if (this.showTag === 'last') {
      return gql`{
        lastTag {
          id
        }
      }`
    }
  }
},

[ch-lukas]

Yeah that would be great! I need it as well e.g. pollInterval: () => this.$root.defaultRefreshRateMs

[joelmandell]

I thought I could do something like below (in smart-apollo.js), but it works only on initial data property,
and not when property is changed (obviuosly cause this.options.pollInterval gets replaced with a property instead of a function). I might look into a PR on this. Just need to figure out this one :)

    // pollInterval reactivity
    if (typeof this.options.pollInterval === 'function') {
      this._watchers.push(this.vm.$watch(() => this.options.pollInterval.call(this.vm), context => {
        this.options.pollInterval = context
        this.refresh()
      }, {
        immediate: true,
        deep: this.options.deep,
      }))
    }

[joelmandell]

OKay, I think i get it now. One could probably do it the same way how skip() works.
Define pollInterval as a getter/setter...

[Maxondria]

OKay, I think i get it now. One could probably do it the same way how skip() works.
Define pollInterval as a getter/setter...

@joelmandell , how did you do this? Any code samples? I am dying with a query that never stops polling... Kindly help.

[Maxondria]

First of all, maybe this at your code scope points global/head variable.
And I think that It seems pollInterval in smart query cannot be reactive currently.
Can use this.$apollo.queries.startPolling(ms) / stopPolling() while watching component properties.

Polling starts....
const self = this; self.$apollo.queries.patientAppointmentStatus.startPolling(300);

but later,

self.$apollo.queries.patientAppointmentStatus.stopPolling()

Can never stop polling....

[joelmandell]

Hey @Maxondria and @ch-lukas
I made a PR for this. Waiting review. Hopefully it Will work okay.

[Maxondria]

Awesome @joelmandell