Combine data from multiple queries

[ahofmeister]

Hi there!

I got the use case to combine the data of two queries and group them by one property (mealCategory).

This is what I got:

export const useGetAlLEatableRecordsByMealCategoryQuery = (date) => {

  const { data: eatableRecords, loading: loadingEatableRecords } = useGetEatableRecordsQuery(date)
  const { data: energyRecords, loading: loadingEnergyRecords } = useGetEnergyRecordsQuery(date)

  if (!eatableRecords || !eatableRecords) {
    return { data: [], loading: loadingEnergyRecords && loadingEatableRecords }
  }
  const data = [...eatableRecords, ...energyRecords].reduce((accumulated, current) => {
    return { ...accumulated, [current.mealCategory]: [...accumulated[current.mealCategory], current]}
  }, { BREAKFAST: [], LUNCH: [], DINNER: [], SNACK: []})

  return { data }
}

What happens is, that we fetch the eatable records and the energy records, check if both are there and if so, group both arrays by the property mealCategory.

I am not sure, if this is the way to go or not quite right. What do you think?

As an alternative I thought about using selectFromResultbut I just can't find any idea how to use it with multiple queries. Any help much appreciated! :)

[phryneas]

That seems perfectly fine, but I'd do it in a useMemo.

[ahofmeister]

@phryneas Thanks! What exactly would you put in the useMemo?

[phryneas]

  const data = useMemo(() => [...eatableRecords, ...energyRecords].reduce((accumulated, current) => {
    return { ...accumulated, [current.mealCategory]: [...accumulated[current.mealCategory], current]}
  }, { BREAKFAST: [], LUNCH: [], DINNER: [], SNACK: []}),
[eatableRecords, energyRecords])

otherwise that will recalculate on each render

[ahofmeister]

Okay, got it! Thanks so much!