title: Why is queryClient.setQueryData taking so long in this example with react-query?
body: <p>I'm updating cache with react-query using useQuery and setQueryData, the problem is setQueryData can take up to 2mins to update the data, possibly due to a loop of some sort. I'm mapping each page on the 'Styles' data, and updating the Styles, Groups and Ranges on the page that matches the pageIndex with data from the response. I have no idea why the very long update, an I using react-query wrong here? The data being updated is not huge at all by the way.</p>
  <p>Thanks in advance.</p>
  <pre><code>export const useStyle = (styleId, pageIndex) =&gt; {
    const queryClient = useQueryClient();
  
    const { refetch } = useQuery('Style', () =&gt; fetchStyle(styleId), {
      staleTime: Infinity,
      refetchOnWindowFocus: false,
      initialData: {},
      onSuccess: (res) =&gt; {
        queryClient.setQueryData('Styles', (oldData) =&gt; ({
          pages: map(oldData.pages, (page, index) =&gt; ({
            ...page,
            ...(index === pageIndex
              ? {
                Styles: {
                  ...page.Styles,
                  ...res.Styles,
                },
                Groups: {
                  ...page.Groups,
                  ...res.Groups,
                },
                Ranges: {
                  ...page.Ranges,
                  ...res.Ranges,
                },
              }
              : {}),
          })),
          pagesParams: oldData.pageParams,
        }));
      },
    });
  
    return { refetchStyle: refetch };
  };
  </code></pre>