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!

Daniel Rearden · Accepted Answer · 2020-04-12 17:58:41Z

2

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

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

answered Apr 12, 2020 at 17:58

Daniel Rearden

85.3k14 gold badges205 silver badges193 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

bizready Over a year ago

Thank you so much, Daniel. I did wrap around function call as well prior to posting it here, maybe I missed something else. It works now and thanks so much!!

Collectives™ on Stack Overflow

apollo vue query variable not recognizing data from page variable

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related