title: React Query displaying error component even though I can't see an error in the network tab (all is 200 OK)
body: <p>I'm fetching data using a custom hook <code>useResponses</code></p>
  <pre><code>const {
      data: responses,
      isLoading: isResponsesLoading,
      isError: isResponsesError,
      refetch: refetchResponses,
    } = useResponses(id);
  </code></pre>
  <p>For the isError, I'm displaying an error component:</p>
  <pre><code>if (isResponsesError) {
    return &lt;ErrorMessage refetch={refetchResponses} /&gt;;
  }
  </code></pre>
  <p>My useResponse hook looks like this:</p>
  <pre><code>export default function useResponses(id) {
    return useQuery(['responses', id], () =&gt; getSurveyResponses(id), {
      keepPreviousData: true,
    });
  }
  </code></pre>
  <p>Every once in a while (and seemingly randomly), the error component is displayed and then when I refetch, it's gone. Looking at the network tab, all the http requests have status 200. What could be causing the error?</p>
  <p>This behavior seems to happen especially when I leave the tab for a while and then come back (by clicking the tab). I know React Query has an <code>refetchOnWindowFocus</code> default. I want to leave it on. However, I want to fix the error displaying randomly.</p>
  <p>Any help is appreciated!</p>
  <pre><code>const getSurveyResponses = async (id) =&gt; {
    try {
      const progressId = await startResponseExport(id);
      const fileId =
        progressId &amp;&amp; (await getResponseExportProgress(id, progressId));
      const survey = fileId &amp;&amp; (await getResponseExportFile(id, fileId));
      return survey?.responses;
    } catch (error) {
      console.error(error.message);
    }
  };
  </code></pre>