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.34k stars 2.66k forks source link

Refetch does not clear data or errors from previous attempts #8833

Open henrywoody opened 3 years ago

henrywoody commented 3 years ago

Intended outcome:

When calling refetch (from useQuery) the data and error values from previous attempts should be cleared.

Actual outcome:

The data and error values are preserved after calling refetch. There is a bit of nuance to this though.

If the initial query results in an error, the data is null (or undefined) and the error value is populated, if refetch is called and the query then succeeds, then data is updated and error is cleared. This seems to be the correct handling.

If the a query (not necessarily the initial query) completes successfully, data is populated and error is null (good), if refetch is then called and results in error, data is left unchanged from before (I would expect to become null/undefined again) and the error is populated as expected. So far that is a mild issue and I can work around it. If then refetch is called and completes successfully, neither data nor error is updated and no React rerender is triggered, leaving the application stuck. (Possibly this only happens when the second successful call returns the same data as the first successful call).

How to reproduce the issue:

  1. Make a query that completes successfully.
  2. Call refetch for that query so that it results in an error.
  3. Call refetch again so that it completes successfully.

Additionally: I've set the fetchPolicy to "network-only" and the errorPolicy to "all".

Also this seems to be pretty much the same issue as this one: https://github.com/apollographql/apollo-client/issues/2513

Versions

  System:
    OS: macOS 11.6
  Binaries:
    Node: 16.2.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.13.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 93.0.4577.82
    Safari: 15.0
  npmPackages:
    @apollo/client: ^3.4.5 => 3.4.11 

A bit of context

I am working on an authentication handler in React using a context to provide authentication details to various parts of the application. My server supports a whoami query, which returns a User object for the current user. When the application mounts, the query is run to check if the user is logged in. If the query runs successfully, then the user is logged in and they proceed to the authenticated part of the app. If the query results in an error, the user is shown the login page.

When the user logs in or out, the context manager calls refetch on the output of the useQuery hook to update the stored data and error values.

Alternate approaches

If this use-case is wrong or there is an option I'm missing to get the desired handling, please let me know.

iba-1 commented 2 years ago

We are observing this kind of issue too, but we can't figure out if is an error of client misconfiguration/code or it's the actual behaviour.

nguiard commented 2 years ago

I am observing this too I think, or something that seems related at least, in a slightly different context. As it might be different, I opened a separate issue: #9205