search

apollographql / apollo-client

:rocket:  A fully-featured, production ready caching GraphQL client for every UI framework and GraphQL server.
https://apollographql.com/client
MIT License
19.38k stars 2.66k forks source link

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

Open phryneas opened 7 months ago

phryneas commented 7 months ago

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 commented 7 months ago

Was able to confirm in useQueryRefHandlers tests as well.

Antti-Kaikkonen commented 6 months ago

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 commented 1 week ago

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.