From 482a98d1ca5870bd1cbfc90c12b7ca88216e0777 Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Tue, 10 Aug 2021 11:04:37 -0400
Subject: [PATCH] do partialRefetch directly in the render execution

---
 src/react/hooks/useQuery.ts | 37 +++++++++++++++----------------------
 1 file changed, 15 insertions(+), 22 deletions(-)

diff --git a/src/react/hooks/useQuery.ts b/src/react/hooks/useQuery.ts
index bbed12fb396..798450761e4 100644
--- a/src/react/hooks/useQuery.ts
+++ b/src/react/hooks/useQuery.ts
@@ -273,34 +273,27 @@ export function useQuery<
 
   let partial: boolean | undefined;
   ({ partial, ...result } = result);
-  // An effect which refetches queries when there is incomplete data in the
-  // cache.
-  //
-  // TODO: This effect should be removed when the partialRefetch option is
-  // removed.
-  useEffect(() => {
-    // When a `Query` component is mounted, and a mutation is executed
-    // that returns the same ID as the mounted `Query`, but has less
-    // fields in its result, Apollo Client's `QueryManager` returns the
-    // data as `undefined` since a hit can't be found in the cache.
-    // This can lead to application errors when the UI elements rendered by
-    // the original `Query` component are expecting certain data values to
-    // exist, and they're all of a sudden stripped away. To help avoid
-    // this we'll attempt to refetch the `Query` data.
+  {
+    // TODO: This code should be removed when the partialRefetch option is
+    // removed.
+    // I was unable to get this hook to behave reasonably when this block was
+    // put in an effect, so we’re doing side effects in the render. Forgive me.
     if (
-      partialRefetch &&
       partial &&
+      partialRefetch &&
+      !result.loading &&
       (!result.data || Object.keys(result.data).length === 0) &&
       obsQuery.options.fetchPolicy !== 'cache-only'
     ) {
-      setTimeout(() => obsQuery.refetch());
+      result = {
+        ...result,
+        loading: true,
+        networkStatus: NetworkStatus.refetch,
+      };
+
+      obsQuery.refetch();
     }
-  }, [
-    partialRefetch,
-    partial,
-    result.data,
-    obsQuery.options.fetchPolicy,
-  ]);
+  }
 
   if (
     ssr === false &&