Advanced data manipulation of a synchronized server state

[czescwojtek]

Welcome! I've probably picked the wrong tools for the job I am required to do, please help me decide.

Currently, I am using react-query to fetch server state - due to the Web's nature, the data is sent in a JSON format, an array at best. As the data is fetched, I am changing its shape completely by removing duplicates, creating instances of Classes, and finally building some Maps (of <string, Class> type) based on the results. All that happens in a select function of the useQuery hook.

The moment I'm done with all the above I have to push the results to a zustand-based state as I need an option to CRUD the Map as the application runs. There are no calls to the backend to modify the data. The way it's done is idiomatic:

const { data } = useSomeQuery()

useEffect(() => {data && setZustandState(data)}, [data])

Now, I've been tasked to enrich the data even more, with another server request that needs to fire right after the first one is done, which basically means I need to build a dependent query and modify my main data in a useEffect once again (2nd. useEffect).

It crossed my mind that all the actions above do not have to, and probably shouldn't be, placed in a React component. It's basically a lot of unnecessary actions (causing rerenders) that could have been done behind the stage. And since I can't write to my store in a useQuery hook, I am leaning towards RTK Query which, if I am understanding it right, could do just that. Can anybody push me in the right direction? Is my idea about RTKQ correct?

[TkDodo]

I have to push the results to a zustand-based state

I would generally question this. Why is it necessary? Server-state usually should have a single source of truth, which is the query itself.

[czescwojtek]

Hey, thanks for looking into this issue. Before I jump into this, I wanted to note that the backend API I am connected to does not work in a way I could fetch, for example, /posts to get all the posts and then do /posts/{postId} to fetch for one entity only - I can get "all or nothing" in a single call. Back to the topic - if I happen to try to read some part of the query cache from within a deeply nested component I guess I could have used QueryClient to do so, but then the cache would be untouched by any of the transforms I've applied to it previously (via select function). Does that make sense?

[czescwojtek]

That's actually pretty good but I'm going to end up applying the same transformations (see 1st post:

As the data is fetched, I am changing its shape completely by removing duplicates, creating instances of Classes, and finally building some Maps (of <string, Class> type) based on the results. All that happens in a select function of the useQuery hook.)

each time I reach for either posts or single post, am I not?

[TkDodo]

each time I reach for either posts or single post, am I not?

well, yes, unless you memoize select, then it only happens once per component. I've also successfully combined it with createSelector from re-select to basically cache the select per input, so it will only run once per input, not per component.

For transformations applying to all posts, I would usually advise to that in the queryFn, but the result of it gets cached and should be json compatible, which classes and maps aren't.

[czescwojtek]

Thanks for your input! Appreciate it.

So I am going to stick with updating the store in the onSuccess function (instead of a useEffect) for now until I come up with something better.

[czescwojtek]

Hey @TkDodo, sorry to bother you again. Got any example code of the createSelector usage?

[TkDodo]

#5094 (comment)