Im total new to Vue so be kind :)
I have a function that gets the user attributes and based on the attribute i avant to run a graphql query on another function. Both functions are in methods and get called on created life cycle. What i did is to assign it to a variable and render it in the DOM. But i cant get to pass it in the function i want. I tried running each function in different lifecycle hook but it didn't help.
export default defineComponent({
name: 'IndexPage',
data: function() {
return {
token: '',
redirectUrl: '',
authUser: ''
}
},
methods:{
async setUser() {
this.authUser = authUser
},
async getAtt() {
Auth.currentAuthenticatedUser()
.then(data => (this.authUser = data.attributes['custom:learn_url']))
.catch(err => console.log(err));
},
async getUrl() {
const id = this.authUser; // This is where i want the id to assign the authUser value
const learnUrl = await API.graphql({
variables: { id },
query: getLearnUrl
});
this.redirectUrl = learnUrl.data.getLearnUrl.learnUrl;
}
},
created() {
this.getAtt();
this.getUrl();
}
})
I think the problem could lie in your created() method. It's calling an async method getAtt(), so you need to wait for it to complete before you can use the authUser variable you got previously in the getUrl() function, otherwise, it will always be empty.
Change created() to async, and await for the functions.
async created() {
await this.getAtt();
await this.getUrl();
}
In addition to Tamas' suggestion you will need to await the result of the Auth.currentAuthenticatedUser() function as well.
export default defineComponent({
name: 'IndexPage',
data: function() {
return {
token: '',
redirectUrl: '',
authUser: ''
}
},
methods:{
async setUser() {
this.authUser = authUser
},
async getAtt() {
await Auth.currentAuthenticatedUser() // 👀
.then(data => (this.authUser = data.attributes['custom:learn_url']))
.catch(err => console.log(err));
},
async getUrl() {
const id = this.authUser; // This is where i want the id to assign the authUser value
const learnUrl = await API.graphql({
variables: { id },
query: getLearnUrl
});
this.redirectUrl = learnUrl.data.getLearnUrl.learnUrl;
}
},
async created() {
await this.getAtt();
this.getUrl();
}
})