Execute an effect inside useQuery "select" method.

[czescwojtek]

Hi there! I know the select method is being used to transform or select a part of the data returned by the query function but, while I transform the data, can I update zustand-based state? Is it considered anti-pattern? Could it lead to some non-standard behavior?

[louis-young]

Hi 👋

I wouldn't update Zustand state in a select function, personally. If you need to synchronise query state with another store then there are more appropriate APIs to use in my opinion; it's hard to advise without knowing what problem you're trying to solve. What is it that you're trying to achieve?

[czescwojtek]

Hey! Thanks for your response! It's just like you've said - I'm trying to synchronize the query state with another store. The way I'm doing it now is just to wait for the query's data to get populated and then update the store in a useEffect, like below:
const { data } = useQuery(); useEffect(() => { data && updateState(data) }, [data]).

The reason I'm doing it is that the data (an array) that comes back from a backend API has/might have duplicated entries so I loop over it and create a Map object and then use it across the application. Now - converting from an array to a Map object is taking place in select function, right in the useQuery hook

[louis-young]

No problem 🙂 that makes sense. If you can't use the query cache as a source of truth for whatever reason then I think using the select option to perform the transformation and continuing to use an effect to do the actual synchronisation is probably the idiomatic way to do this 👍

[czescwojtek]

Hey @louis-young, sorry to bother you again - not sure if you have any experience in using RTK Query but if you do - don't you think it would be better to switch to that in my case? I mean, I am now updating "zustand" store after I'd fetch some data with react-query. Feels weird, doesn't it?