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

[phryneas]

Issue Description

I encountered this over in https://github.com/apollographql/apollo-client-nextjs/pull/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

https://github.com/apollographql/apollo-client-nextjs/pull/258/commits/3a014a44a9699d6f89296e878d6fa227fa62266e

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.

[addemod]

Wil this be resolved in a near future?

This also occurs when passing down the queryRef and executing useQueryRefHandlers in a child component, if useReadQuery has been executed in the parent component.

[itd-cba]

i also encountered this and it costed a lot of time finding this strange behaviour. I used the fetchMore function