When using useReadQuery directly before useQueryRefHandlers, refetch won't update the useReadQuery result

[phryneas]

Issue Description

I encountered this over in apollographql/apollo-client-nextjs#258:

  const { refetch } = useQueryRefHandlers(queryRef);
  const { data } = useReadQuery(queryRef);

works, but

  const { data } = useReadQuery(queryRef);
  const { refetch } = useQueryRefHandlers(queryRef);

fails to rerender the page when the refetch finishes.

Link to Reproduction

apollographql/apollo-client-nextjs@3a014a4

Reproduction Steps

No response

@apollo/client version

3.9.10

[jerelmiller]

Was able to confirm in useQueryRefHandlers tests as well.

[Antti-Kaikkonen]

I encountered the same bug with the fetchMore function from useQueryRefHandlers.

The difficulty in finding it was that the bug doesn't appear when running the development server from Create React App, but it does occur in the production build.

[mbiggs-gresham]

I've just come across the same problem when trying to replace a standard useQuery with createQueryPreloader and react-router.

The apollo cache is hit correctly, but the data never updates after calling fetchMore and thus your page is out of date. Re-ordering the two hooks seems to work around it.