[Bug] IE throws TypeError in destroyed hook in Vue components using vue-apollo

[JasonLi914]

Am running into a couple errors when using Vue Apollo in IE (in Chrome everything runs smoothly):

1. Right now I'm getting an error in IE when removing a Vue component that is using vue-apollo. Specifically, it is happening if I have an apollo object on data like so: https://github.com/Akryum/vue-apollo#usage-in-components, and the error is [Vue warn]: Error in destroyed hook: "TypeError: Object expected". It's been tough debugging Vue-apollo code to figure out where exactly the error is getting thrown because I'm not super familiar with the implementation of vue-apollo, so any suggestions on lines of code I can put breakpoints that are related to cleaning up vue apollo would be super helpful, thanks! Or if you know what is going wrong, that'd also be great.

2. I am also getting a TypeError in this line of graphql in IE (and I suspect any browser that only supports ES5): https://github.com/apollographql/apollo-client/blob/master/packages/graphql-anywhere/src/graphql.ts#L138. The TypeError is Object.keys argument is not an object and is because fieldResult is sometimes a string (from what I've seen, it's usually the name of a query in start casing so if in my component I have this in the apollo object:

   apollo: {
   myQuery: gql`some valid query`
   }

I put a breakpoint inside the graphql-anywhere code I linked above and see that 'fieldResult' is the string 'MyQuery', and then inside of the merge function, it calls Object.keys('MyQuery') which throws errors in IE, because ES5 doesn't support this: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys.

I only get this second error when I use vue-apollo in my Vue components, it works fine when using apollo client directly. I didn't do much digging past that, wanted to know if other people have been experiencing this in IE or could point me in to how I can debug further. Thanks!

[JasonLi914]

Update: My second bug has been fixed in the latest version of graphql-anywhere that just got released (4.1.10). Here is the commit fixing it: https://github.com/apollographql/apollo-client/commit/1677bb3b31a2ac3e622b8e0069cf9eed2458c1c3

[Akryum]

Is this still happening?

[JasonLi914]

@Akryum The first bug still happens [Vue warn]: Error in destroyed hook: "TypeError: Object expected for me in IE, although I locked down my verison to beta.5 because there were some outstanding issues on versions after that version. Do you know if you've fixed the issue in a more recent release?

Otherwise, do you have a jsbin or codepen with necessary Vue-apollo boilerplate that I can use to create a reproducer? If not, I can probably see if I can create one and I'll comment back here with it.

[Akryum]

You can use vue-cli-plugin-apollo to have a project with Vue and Apollo ready in matter of minutes.

[johnny-dash]

@Akryum The first bug still happens to me [Vue warn]: Error in created hook: "TypeError: Object expected" in IE 11. I am using vue-apollo beta.19 version. I did a little bit investigation by looking into the source code. I think the line 542 in vue-apollo.esm.js is where the error comes from. I think some how handlers[Symbol.iterator] in that loop return undefined in IE 11 while it return a function in Chrome. I have the es6-symbol polyfill setup but it looks like not fixing this problem.

Ps: I also upgrade my vue-apollo to the latest version beta.28 but it not fix this issue.

[adnanhz]

Any updates on this?