apollo vue 查询变量无法识别页面变量中的数据

Question

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

我的代码：

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?

我在上面花了几个小时，还是没能弄清楚问题所在！我错过了什么吗？非常感谢任何帮助！

Answer 1

variables 应该是一个函数，以便定义 this，如 docs:

所示

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

apollo vue 查询变量无法识别页面变量中的数据

apollo vue query variable not recognizing data from page variable

vue.js

graphql

apollo

quasar