Cache results from select

[toppsdown]

hey there! I have an app that generates reports based on the user's submitted data.

We preprocess the data on the backend to make it easier for the frontend to work with. Once it's been received by the frontend, we still need to manipulate it a bit based on the filters and settings the user has selected in the report (ie. date range, subset of data etc).

We're currently using the "select" feature in react query so that these reports only get re-generated when the underlying data is changed, but obviously, if the user changes a filter, then the select function changes with it.

Is there a recommended way to cache the filtered data for the reports so it doesn't get recalculated every time the user changes a filter?

For example: we have preset filters for past week, month, and year. Right now, every time the user switches between them it recalculates. I want it to not recalculate them unless the data changes. In fact, it would be great if those 3 presets got fetched and calculated before the user even clicks into the reports page.

Any suggestions?
Thanks!

[dominikdosoudil]

In case that you can't modify the backend to respect these filters, which would work the best IMO, then I would probably go with following approach. In the case that you know, that you want to calculate the 3 options, I would calculate them right in the query function. It would not be great if you reused the result of the query somewhere else without precalculating the variants however it seems to me that your use case is kinda specific and it might go well for you.

  useQuery({
    queryKey: ['report'],
    queryFn: async () => {
      const data = await fetch(...);
      return { week: calcWeek(data), month: calcMonth(data), year: calcYear(data) }
    },
  });

Then you would just pick the right value from the returned tuple according to filter.

[TkDodo]

outside caching is your friend, e.g. with reselect or memoize-one:

const cachedSelector = createSelector(
 data => data,
 data => calcWeek(data)
)

useQuery({
  queryKey,
  queryFn,
  select: cachedSelector
})

now, select is cached per input, even across usages. Keep in mind that most cache libs only keep the latest version, so if data changes frequently between components, this caching achieves nothing.

[peterpme]

Holy cow this comment is gold. Thanks @TkDodo!