fix refetch after error

src/__tests__/useQuery-test.tsx

@@ -131,16 +131,21 @@ function Tasks({ query, ...options }: TasksProps) {
 
 interface TasksWrapperProps extends TasksProps {
   client?: ApolloClient<object>;
+  TasksComponent?: React.FC<any>;
 }
 
 const SuspenseCompat = ({ children }: SuspenseProps) => <>{children}</>;
 
-function TasksWrapper({ client, ...props }: TasksWrapperProps) {
+function TasksWrapper({
+  client,
+  TasksComponent = Tasks,
+  ...props
+}: TasksWrapperProps) {
   const SuspenseComponent = props.suspend !== false ? Suspense : SuspenseCompat;
 
   const inner = (
     <SuspenseComponent fallback={<>Loading with suspense</>}>
-      <Tasks {...props} />
+      <TasksComponent {...props} />
     </SuspenseComponent>
   );
 
@@ -452,6 +457,89 @@ it('should support updating query variables with suspense', async () => {
 `);
 });
 
+it('should refetch the query', async () => {
+  const MY_TASKS_MOCKS: MockedResponse[] = [
+    {
+      request: { query: TASKS_QUERY, variables: {} },
+      result: {
+        data: { __typename: 'Query' },
+        errors: [new GraphQLError('Simulating GraphQL error')],
+      },
+    },
+    {
+      request: { query: TASKS_QUERY, variables: {} },
+      result: {
+        data: { __typename: 'Query', tasks: [...SAMPLE_TASKS] },
+      },
+    },
+  ];
+
+  const client = createClient({ mocks: MY_TASKS_MOCKS });
+
+  function MyTasks({ query, ...options }: TasksProps) {
+    const { data, error, loading, refetch } = useQuery(query, {
+      ...options,
+    });
+    const refetched = React.useRef(false);
+
+    React.useEffect(
+      () => {
+        if (!loading && !refetched.current) {
+          refetched.current = true;
+          refetch();
+        }
+      },
+      [loading]
+    );
+
+    if (error) {
+      return <>{error.message}</>;
+    }
+
+    if (loading) {
+      return <>Loading without suspense</>;
+    }
+
+    if (!data) {
+      return <>Skipped loading of data</>;
+    }
+
+    return <TaskList tasks={data.tasks} />;
+  }
+
+  const { container } = render(
+    <TasksWrapper
+      client={client}
+      query={TASKS_QUERY}
+      TasksComponent={MyTasks}
+    />
+  );
+
+  expect(container).toMatchInlineSnapshot(`
+<div>
+  Loading without suspense
+</div>
+`);
+
+  await wait();
+
+  expect(container).toMatchInlineSnapshot(`
+<div>
+  <ul>
+    <li>
+      Learn GraphQL
+    </li>
+    <li>
+      Learn React
+    </li>
+    <li>
+      Learn Apollo
+    </li>
+  </ul>
+</div>
+`);
+});
+
 it("shouldn't suspend if the data is already cached", async () => {
   const client = createMockClient();
   const { container, rerender } = render(

src/useQuery.ts

@@ -188,6 +188,8 @@ export function useQuery<
         return;
       }
 
+      let subscription: ZenObservable.Subscription | undefined;
+
       const invalidateCurrentResult = () => {
         // A hack to get rid React warnings during tests. The default
         // implementation of `actHack` just invokes the callback immediately.
@@ -197,16 +199,45 @@ export function useQuery<
           setResponseId(x => x + 1);
         });
       };
-      const subscription = observableQuery.subscribe(
-        invalidateCurrentResult,
-        invalidateCurrentResult
-      );
+
+      // from: https://github.com/apollographql/react-apollo/blob/master/src/Query.tsx#L363
+      // after a error on refetch, without this fix, refetch never works again
+      function invalidateErrorResult() {
+        unsubscribe();
+
+        const lastError = observableQuery.getLastError();
+        const lastResult = observableQuery.getLastResult();
+
+        if (!suspend) {
+          observableQuery.resetLastResults();
+          subscribe();
+        }
+
+        Object.assign(observableQuery, { lastError, lastResult });
+
+        actHack(() => {
+          setResponseId(x => x + 1);
+        });
+      }
 
       invalidateCachedObservableQuery(client, watchQueryOptions);
 
-      return () => {
-        subscription.unsubscribe();
-      };
+      function subscribe() {
+        subscription = observableQuery.subscribe(
+          invalidateCurrentResult,
+          invalidateErrorResult
+        );
+      }
+
+      function unsubscribe() {
+        if (subscription) {
+          subscription.unsubscribe();
+        }
+        subscription = undefined;
+      }
+
+      subscribe();
+      return unsubscribe;
     },
     [shouldSkip, observableQuery]
   );