Vue.js apollo vue查询变量无法识别来自页面变量的数据

我有以下apollo查询设置。我想动态传递用户名，但无法识别该用户名

我的代码：

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;
      },
    },
  },
};

以下硬编码设置有效：

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

此设置不起作用：

variables: {
  username: this.username
},

错误：

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?

---

我已经花了几个小时在它上面，仍然无法理解这个问题！我遗漏了什么吗？非常感谢您的帮助

变量

应该是一个函数，以便定义该，如图所示：

---

非常感谢你，丹尼尔。在这里发布函数调用之前，我也总结了函数调用，也许我错过了其他东西。现在可以用了，非常感谢！！

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