apollo vue query variable not recognizing data from page variable

Question

I have the following apollo query setup. I want to pass the username dynamically but this.username is not recognized.

My code:

export default {
  data () {
    return {
      username: ''
    };
  },
  beforeCreate () {
    this.$Auth
      .currentAuthenticatedUser()
      .then((userProfile) => {
        this.username = userProfile.username;
      })
      .catch(() => this.$router.push({ name: 'auth' }));
  },
  apollo: {
    services: {
      query: gql(servicesByUser),
      variables: {
        username: this.username
      },
      update: (data) => {
        console.log('apollo:services', data);
        return data.servicesByUser.items;
      },
    },
  },
};

The below-hardcoded setup works:

variables: {
  username: "user-a"
},

This setup does not work:

variables: {
  username: this.username
},

Error:

TypeError: Cannot read property 'username' of undefined
    at Module../node_modules/babel-loader/lib/index.js?!./node_modules/@quasar/app/lib/webpack/loader.auto-import.js?

I have spent a few hours on it, still not able to figure the issue! Am I missing anything? Any help is much appreciated!

Answer 1

variables should be a function in order for this to be defined, as shown in the docs:

apollo: {
  services: {
    ...
    variables () {
      return {
        username: this.username,
      }
    },
  },
},