'React-query: useQueryClient doesn't update

I'm trying to mutate data in loop in one component and then use query client data in another one. Example code: Component 1:

const promises = [];

items.forEach(i =>
  promises.push(
    mutateAsync({ id: i }).then(data =>
      queryClient.setQueryData([MY_DATA, { id: i }], data),
    ),
  ),
);

await Promise.all(promises);

Then in another component I'm trying to use useQueryClient

Component 2:

const queryClient = useQueryClient();

If I check queryClient.getQueriesData(MY_DATA) in first component, everything is fine and updated data is shown. In second one there is no update.

Am I doing something wrong? Or should I somehow listen for queryClient changes?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source