I am writing this wire method that when the data is loaded, it will trigger off a refresh of some other wire methods dependent on the results of this wire method. I do this by using a Promise and refreshApex method.
@track rels
@track relIds
@wire(getRels) wiredRels({error, data}) {
if (data) {
new Promise(() => {
for (var i=0; i<data.length; i++) {
data[i]["quizzes"] = [];
this.rels.push(data[i]);
this.relIds.push(data[i].Id);
console.log('WIREDRELS - RelIds Length: ' + this.relIds.length);
}
}).then(() => {
refreshApex(this.wiredQuizzes);
})
}
else if (error) {
// handle errors
}
}
@wire(getQuizzes, { relIds: "$relIds"}) wiredQuizzes({error, data}) {
console.log('WIREDQUIZZES - RelIds Length: ' + this.relIds.length);
if (data) {
for (var i=0; i<this.rels.length; i++) {
for (var j=0; j < data.length; j++) {
if (this.rels[i].Id === data[j].StudentCourseRelationship__c) {
this.rels[i].quizzes.push(data[j]);
}
}
}
}
else if (error) {
// handle errors
}
}
There are two bugs that I'm running into:
- When the page that has this web component first loads, my debug console prints out:
WIREDQUIZZES - RelIds Length: 0
WIREDRELS - RelIds Length: 8
WIREDQUIZZES - RelIds Length: 8
Which is what I expect. But when the html goes to loop through a courses quizzes, it's not printing anything out, even though I was able to confirm that there were a few related quizzes. My guess is this is a caching issue from the first time wiredQuizzes was loaded it didn't have anything.
- My second issue is that when I go to reload the page, then the console prints out:
WIREDQUIZZES - RelIds Length: 0
WIREDQUIZZES - RelIds Length: 0
WIREDRELS - RelIds Length: 8
Which tells me that the promise method isn't working, and it's running the refreshApex method before the promise finishes.
What do I need to do to chain together a queries
