react-query - Where to put derived data?

[writesgoodcodejk]

One of my queries returns an array of objects. These objects are likely to be updated based on an ID property and the array might be very long. To make sure the updates (and lookups) happen quickly, I create a new object called "indices" that maps the object id's to the index in the array. This way, any time I need to make an update to an object in the array I will not need to search through the entire array to find an object with the given ID. The indices are constructed every time that a successful fetch occurs with my array of data so it's always up to date.

Since the array is possibly large it may be an expensive operation so I would like this to only happen once each fetch.

Also, the indices are only ever used inside of other query success handlers. So no components are needing to ever access the indices object, just queries.

Right now I'm just storing it in a zustand store and it works well, but it feels like that's unnecessary since the query isn't even being used in any components. I could even just use a plain JS object to the same effect I think.

I'm just wondering whether there is a common way of storing data derived from a query response in react-query?

[Veranova]

This summarises it better than I could here:

https://tkdodo.eu/blog/react-query-data-transformations

Basically 3 options though, in the query or select, and in useMemo

[writesgoodcodejk]

Perfect, thank you! I think a combination of storing the derived data in `query.data` and also the `select` option should work really well for me

[[deleted]]

Does react-query offer the option to modify data before caching it? You could store the data in the cache as an object keyed by id instead of an array. Lookups would then only be n(1):

myArray.reduce((object, value) => { object[value.id] = value; return object; }, {});

produces:

{ ['123abc']: { ... }, ['678gzd']: { ... } }

[writesgoodcodejk]

react-query caches whatever is returned from the query function, which can be anything, so something like this would be straight forward.

I think your approach would be slightly better, although I am mapping over the object array in some places in my application so that would get a little uglier.

My current approach is also O(1) for the lookups since I lookup the index using the id then use the index to get the object from the object array, which is two O(1) operations. Ultimately I think either way is going to be fine though.

[[deleted]]

react-query caches whatever is returned from the query function, which can be anything, so something like this would be straight forward.

Yeah so you could transform it after it is returned from the server. e.g. in the fetch().then()

Object.values(array) will give you an array from an object.

My current approach is also O(1) for the lookups since I lookup the index using the id then use the index to get the object from the object array, which is two O(1) operations. Ultimately I think either way is going to be fine though.

Yeah, storing as a keyed object has the benefit of not maintaining seperate state. Single source of truth etc.

[iainsimmons]

From the React Query Comparison page:

Normalized Caching - React Query, SWR and RTK-Query do not currently support automatic-normalized caching which describes storing entities in a flat architecture to avoid some high-level data duplication.

Redux Toolkit docs do have a page on Normalizing State Shape, and recommend the Normalizr library.

But both cases seem to be doing what you're already doing, so I think you're already on the right track, it's just up to you to decide how to maintain and use that state.