Angular Tanstack Cached Observables are refreshing data and not using the cache causing...

I'll keep it short as possible ><

-I have a left hand menu with items that can be expanded/collapsed. This is dependent on "getAll()" and works as expected.

-When I incorporated "getAllAsMap()" (which is used for breadcrumbs) this does rely on modifying the data from "getAll()".

-However it appears that whenever "getAllAsMap()" is invoked it's actually not using the cached data and appears to refresh the data which collapses the entire left hand menu's items.

I'd greatly appreciate assistance with this!

-------------- Code --------------

getAll() {
console.log("GET ALL INVOKED")
return this.useQuery(['orgs', 'all'], () => {
//Each time the folders are opened/expanded this is actually invoked, the cache isn't being used.
// which I believe resets the data causing the folders in the left hand menu to collapse when clicking on them.
console.log("?????getAll internal invoked");
const returnedData = this.organizationsService.getOrganizations();
console.log("Returned data: (expect to just see some observable obj)", returnedData)
console.log(returnedData)
return returnedData
}).result$;
}

getAllAsMap() {
console.log("GET ALL AS MAP INVOKED")
return this.useQuery(['orgs', 'all', 'map'], () => {
console.log(" getAllAsMap internal invoked")
return this.getAll().pipe(
mapResultData(org => this.reduceOrgs(this.flattenOrgs(org)))
)
}
).result$.pipe(filterSuccess(), mapResultData(org => org.data!));
}

Continue reading...