3.0.0-beta.14+ doesn't work anymore when used with @Component decorator

[philmueller]

From 3.0.0-beta.14 on, the following code results in a TypeError ("Cannot read property 'data' of undefined"):

@Component({
  apollo: {
    allFilms: QUERY_ALL_FILMS,
  },
})
export default class App extends Vue {
  allFilms = []
}

Full minimal reproduction code: https://codesandbox.io/s/ymllyyyx7z
The code works if the dependency in package.json is changed to "vue-apollo": "3.0.0-beta.13".

It seems like #295 (mentioning a043654 as possible root cause) describes a similar problem, but upgrading vue-apollo to the latest version doesn't seem to solve the issue.

[archseer]

I have to say, in the end updating the vue-apollo dependency didn't help at all, but I couldn't build a minimal repro case, so I never bothered reopening the issue -- #295 definitely isn't fixed either. So cheers for getting a minimal repro! 🎊

#338 also seems possibly related

[Akryum]

Strange, I just added a class decorator in the typing tests and it's working fine: https://github.com/Akryum/vue-apollo/blob/master/types/test/Decorator.ts

[alarie]

On a related note:
It seems to work fine if you don't add the allFilms = [] line. This line clashes with https://github.com/Akryum/vue-apollo/blob/master/src/mixin.js#L39.

The getter is defined before the allFilms = [] is executed, which causes an error that a property without a setter cannot be set.

An option seems to be to remove all assignments and keep just the type defs (eg. allFilms: any[]), but of course that means that all default values are gone.

A solution would be to move the default value up in the apollo options. A backwards compatible option would be to define a setter along with the getter. (This setter could be defined in a way that it works only on the very first call)

Going through the mixin code a bit more I discovered that you intend to create the getter only if it does not exist as prop, method or computed. But it seems there is no check if it exists within the data object. I see that that's a problem because data may be a function which probably should not be called by anyone but vue itself. May it be a viable solution to move the proxyData call from the beforeCreate in the created hook? At that time all data properties should have been defined on the Component instance itself, so that we could simple check for hasProperty(this, key).

[Akryum]

May it be a viable solution to move the proxyData call from the beforeCreate in the created hook?

This will break watchers on the dynamically added fields in proxyData.

[alarie]

Yeah I realized that it would cause other problems as well. Your solution looks great! Thanks for the fix!

[alarie]

Okay I tested your solution and it creates another issue. If your have a property that's watched ({immediate: true}) or which is used in a getter, that watcher or computed property seems to get called before the setter was called. So in those cases the property value is undefined which causes more problems of course if you rely on the default value to be there.

A quickfix that works for me looks like this:

const defaultValues = {};
// watchQuery

var _loop = function _loop(key) {
    if (key.charAt(0) !== '$') {
    var options = apollo[key];
    // Property proxy
    if (!options.manual && !hasProperty(_this.$options.props, key) && !hasProperty(_this.$options.computed, key) && !hasProperty(_this.$options.methods, key)) {
        Object.defineProperty(_this, key, {
        get: function get$$1() {
            return _this.$data.$apolloData.data[key] === undefined
              ? defaultValues[key]
              : _this.$data.$apolloData.data[key]
        },
        // For component class constructor
        set: function set$$1(value) {
            defaultValues[key] = value;
        },
        enumerable: true,
        configurable: true
        });
    }
    }
};

But I really don't like that fix, because in case your graphql query returned undefined on purpose, that value would be masked by the default value.

[Akryum]

I just fixed that in 0345373