Sync server state with UI state

[nir905]

Hi,

One issue that really bothers me - How can I sync data which saved on the cache of react-query with some other UI state management library (like Redux)?

For example -
I'm fetching from the server a list of ids (in a hook called useIds).
On the first fetch only (of the same query key) I would like to save the first id on redux reducer (as selectedId) in order to change it in the future.

Of course, I can write a simple useEffect which syncing the data and updating the state but I may use this custom hook (useIds) in a lot of places and I'm feeling a bit uncomfortable to put this useEffect in all places.

Do you have any thoughts on how to do it right?

[wolverineks]

could you provide a working example on codesandbox.io?

[nir905]

Sorry for the delay. Here is a working example:
https://codesandbox.io/s/sleepy-perlman-y5tqn?file=/src/App.js

In the useIds I've used useState to keep the selected id and the useEffect syncing it when the data is ready.
There are some issues with this example:

1. When I want to use useIds somewhere else (even if I will use Redux to save the selected id) -> the useEffect will listen data everywhere.

2. When invalidating the data the useEffect will run again and update the selected id (which is unwanted behavior).

Another option to handle this issue is like here:
https://codesandbox.io/s/vibrant-sanne-7uegm?file=/src/useIds.js

Any thoughts?

[wolverineks]

I would do something like:

( selectedId: selectedId || data?[0] }