I've encountered numerous async/return undefined queries on this platform, but despite trying various solutions, I'm unable to make any progress. My apologies if I overlooked something obvious.
In an attempt to improve reusability, I extracted all Apollo mutations from my main Vue code and placed them in a global mixin. However, it seems that I am struggling with the correct async/promise syntax for one of the queries.
Here is the mixin function I have created:
async DBgetGroupName(id) {
if (id == null) {
return process.env.VUE_APP_DEFAULT_GROUP_NAME;
} else {
await this.$apollo
.query({
query: GET_GROUP,
variables: {
id: id,
},
})
.then((data) => {
let ret = data.data.groups[0].group_name;
return new Promise((resolve, reject) => {
if (ret !== undefined) {
console.log("Return value is " + ret);
resolve(ret);
} else {
reject("Error");
}
});
})
}}
Additionally, here is the watcher being used:
watch: {
selected: async function() {
let vars = {
id: null,
name: "",
};
vars.id = this.selected;
this.DBgetGroupName(vars.id).then((data) => {
console.log("Name is " + data);
});
},
}
I have tried several variations such as returning the 'ret' value directly without wrapping it in a promise, and using
let data = await this.DBgetGroupName(vars.id)
in place of the then block within the watcher. Despite these attempts, the console consistently displays:
Return value is Test Group [or whichever group I've selected, ie the correct value]
Name is undefined
What am I overlooking? Why is the value not being passed to the watcher as expected?
Any advice provided would be greatly appreciated. Thank you.