What is the lifecycle of vue apollo subscriptions?

Question

Does vue-apollo automatically unsubscribe the query when the View changes?

For example, I have two views routed to /users and /orders. /users has a subscription to the users table and /orders has a subscription to the orders table.

If I were on the /user page, would the order subscription still be in effect? If yes, how would I be able to turn it off?

score 4 · Accepted Answer · edited Jul 15 '22 at 21:49

Since Apollo queries are bound to your component they will follow the lifecycle of your components, i.e. if your route changes (different components are renderd), your old components will be deleted and therefore your old queries will also be removed.

This is taken care of within Vue apollo by this mixin.

Take a look at the following part:

export function installMixin (Vue, vueVersion) {
  Vue.mixin({
    // Other irrelevant code for this question
    destroyed: destroy,
  })
}

This means it binds to the 'destroyed' event of each Vue component which will then trigger the destroy function (as defined by the Vue API reference):

function destroy () {
  if (this.$_apollo) {
    this.$_apollo.destroy()
  }
}

So this process ensures your queries are destroyed and not in effect anymore when your component is destroyed.

I hope this answers your question

thanks! this is great. I appreciate the link to the code. – zcaudate Feb 27 '20 at 13:02 — zcaudate, Feb 27 '20 at 13:02

What is the lifecycle of vue apollo subscriptions?

1 Answers1