useQuery stops updating after first network error

[gajus]

Intended outcome:

I want to get updates about every time that a query fails.

Actual outcome:

Only the first error propagates to query results.

How to reproduce the issue:

const getSnackMeetingInvitationQuery = useQuery(GET_SNACK_MEETING_INVITATION, {
  errorPolicy: 'all',
  fetchPolicy: 'network-only',
  pollInterval: 1000,
  variables: {
    uid,
  },
});

console.log('getSnackMeetingInvitationQuery', {
  data: Boolean(getSnackMeetingInvitationQuery.data),
  error: Boolean(getSnackMeetingInvitationQuery.error),
  loading: Boolean(getSnackMeetingInvitationQuery.loading),
});

If you look at the screenshot, it is clear that only the first time that an error occurs that it propagates to the results.

The expected result is that we should see:

getSnackMeetingInvitationQuery {data: true, error: true, loading: false}

after the last error in the console log.

Versions

  System:
    OS: macOS 10.15.5
  Binaries:
    Node: 14.5.0 - ~/.nvm/versions/node/v14.5.0/bin/node
    npm: 6.14.5 - ~/.nvm/versions/node/v14.5.0/bin/npm
  Browsers:
    Chrome: 84.0.4147.105
    Safari: 13.1.1
  npmPackages:
    @apollo/client: ^3.1.1 => 3.1.1
    @apollo/react-hooks: ^4.0.0 => 4.0.0

[gajus]

Just in case, setting errorPolicy: 'none' has no effect.

[gajus]

I worked around this by implementing a custom hook:

const useLatest = (uid: string) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [stopPolling, setStopPolling] = useState(() => {
    return () => {};
  });
  const [error, setError] = useState(null);

  const apolloClient = useApolloClient();

  useEffect(() => {
    const watchQuery = apolloClient.watchQuery({
      errorPolicy: 'all',
      fetchPolicy: 'no-cache',
      notifyOnNetworkStatusChange: true,
      pollInterval: 1000,
      query: LATEST_QUERY,
      variables: {
        uid,
      },
    });

    const subscriber = {
      error: (apolloError) => {
        setError(apolloError);

        setTimeout(() => {
          watchQuery.resetLastResults();
          watchQuery.subscribe(subscriber);
        }, 1000);
      },
      next: (state) => {
        if (!deepEqual(state.data, data)) {
          setData(state.data);
        }

        setLoading(state.loading);
        setError(null);
      },
    };

    watchQuery.subscribe(subscriber);

    setStopPolling(() => {
      return () => {
        watchQuery.stopPolling();
      };
    });
  }, [apolloClient, data, uid]);

  return {
    data,
    error,
    loading,
    stopPolling,
  };
};

[gajus]

If you were to just use notifyOnNetworkStatusChange: true,, it would fix this problem, but it would cause re-render every time network status changes.

Somewhat related issues:

• Using useQuery with pollInterval triggers onCompleted only once #5531 (comment)
• Loading never gets updated to "false" #1186
• useQuery fails to return cached data when variables are changed #5659

[hwillson]

If someone can provide a small runnable reproduction that demonstrates this happening with @apollo/client@latest, we'll take a closer look. Thanks!