Fix for Issue #924 (Cannot Re-assign $apollo)

[JoshuaJarman]

#924

Added the recommended sanity check .hasOwnProperty that is best practice for .defineProperty to fix .$apollo redefinition bug when using more than one Vue application on a page, or multiple vue built standard web components, like a web component library.

This bug is a show stopper for using vue-apollo in standard web components but fortunately was easily fixable by adding the standard best practices check around the block to prevent redefinition.

Also worth noting that it appears this same issue it has occurred and crept back into this project several times.

[spinningarrow]

Would love for this to be merged in! Currently having issues because VueApollo insists on being installed globally if Vue is exposed globally…

[gkweb]

Please merge this in - Having this exact same issue with a global Vue declared.

[gkweb]

Temporary solution

For anyone else having this issue - Declare your Vue anything but window.Vue. I have a simple resolver function to resolve to the window object. Can be updated for SSR if need be global || window. See below:

/** Resolves the global window Vue */
export const resolveVue = () => {
  if (window && !window.__Vue) {
    window.__Vue = Vue
  }	
  return window.__Vue
}

const GlobalVue = resolveVue()

And then you can use VueApollo and check for its existence manually on the object already if need be

if (!Object.prototype.hasOwnProperty.call(GlobalVue, '$apollo')) {
  GlobalVue.use(VueApollo)
}

This is definitely an edge case but I hope this helps

[jpagarcia]

Any update on this? Would like to get this working on NuxtJS. I've tried the changes made and it does work.