sync React State with useQueries state

[Ahmad-Alzamer]

I have a complex application where I need to:
1- write a genereic code that will take a JSON and render some react components based on that
2- maintain complex state with multiple action--> so, I need to use React Reducer
3- based on the JSON from step 1, I need to fire one or more queries to the backend at different times.

I used useQueries to construcet the query objects with QueryKey and QueryFn.
however, since there are alot of actions that will need to process the data from the backend calls, I need to move the result from react-query useQueries result array to the React State using action/dispatch.

I used React's useEffect with the dependencies array set to the result array from the useQueries. however, since the useQueries returns a new array in each render, the useEffect is invoked in each render and dispatches a new action. so for every user action that ends up dispatching an action to the reducer, the component will re-render and the useQueris is called again and returns a new query result array. thus, the reduce react-query result action is invoked again.

I want to avoid this extra reduce react-query action.
a solution I used is to
a- use the useIsFetching to get the total number of backend calls that are still running
b- use useEffect with dependency array set to the number from step a
c- everytime a call is completed, the number from step a will change and the effect is invoked
d- the effect will dispatch an action with the useQueries result array and process the results in the reducer function

I just have a feeling that this is a hacky solution but I am not able to find a better solution.
is there a better way to do this?

also, for whatever reason, the onSuccess callback in not invoked; so I could not dipatch action from there.

[czabaj]

for whatever reason, the onSuccess callback in not invoked; so I could not dipatch action from there.

I think this article goes to the point https://tkdodo.eu/blog/breaking-react-querys-api-on-purpose#state-syncing

---

As for the state syncing, you are limited by the rules-of-hooks and that is always difficult.

One solution is to construct an array of data and pass that as the dependency array to the useEffect

const results = useQueries(...);
const resultsData = results.map(r => r.data);
useEffect(()=> {}, resultsData); // passed array w/o wrapping in another array

Here the resultsData contains the data which is a referentially stable object, but you might encounter a problem: the dependency array's length must not change, so you must never change the count of queries. If you don't change the length of queries then this will work and it will trigger useEffect each time there is a change in any data.

---

Another solution works when you change the size of queries and is more granular, you will be able to react to each data separately, but it involves more boilerplate. Create a headless component - a component that contain only logic and returns null - that component will accept Data | undefined in props and will contain useEffect that will react to existence or change of the data. Then render this component for each item in results

const HandleData = (props) => {
  useEffect(() => {
    if (!data) return;
    props.onDataChange(data)
  // ignore the `onDataChange` prop in dependency array, we are only interested
  // in change of `props.data` and we will use the `onDataChange` callback that
  // exists at the time the data has changed - you might need to ignore eslint rule
  // that would force you to pass `onDataChange` to the dependency array.
  }, [props.data]);
  // return null, we only want to trigger some logic to work around rules-of-hooks
  return null;
}

const Component = () => {
  const results = useQueries(...);
  return (
    <>
      {results.map((r, i) => <HandleData data={r.data} key={i} onDataChange={props.onDataChange}/>)}
    </>
  );
}

This in essence allows you to run one useEffect for each query in queries.

---

The first solution is very hacky and might bite you when the length of queries changes, so I would prefer the second solution.

[Ahmad-Alzamer]

thanks for the response.
the first solution won't work for my use case since we do some pre-processing when building the useQueries input array and that pre-processing may endup creating arrays of different sizes.

regarding the second one, this is the first time I saw such approach so I am not sure about it. I will have to try and see whether it will work for my use case or not.