From b54b7d1e958e6a16ba5d1ee84a556630d3040903 Mon Sep 17 00:00:00 2001
From: Phil Pluckthun <phil@kitten.sh>
Date: Mon, 31 Jan 2022 12:18:35 +0000
Subject: [PATCH 1/2] (react) - Update initial state to not require abort on
 mount

Previously, the `useSyncExternalStore` reimplementation regressed
on us constructing the correct initial state on mount, and instead
relied on an abort on mount, which is confusing to users.
Instead, we can simply revert to what we've done prior to the
change and ensure that the initial state is accurate.
---
 packages/react-urql/src/hooks/useQuery.ts | 43 +++++++++++++----------
 1 file changed, 24 insertions(+), 19 deletions(-)

diff --git a/packages/react-urql/src/hooks/useQuery.ts b/packages/react-urql/src/hooks/useQuery.ts
index 94b98b0907..06565f5105 100644
--- a/packages/react-urql/src/hooks/useQuery.ts
+++ b/packages/react-urql/src/hooks/useQuery.ts
@@ -53,17 +53,30 @@ export function useQuery<Data = any, Variables = object>(
   const request = useRequest<Data, Variables>(args.query, args.variables);
   const cache = getCacheForClient(client);
 
+  const currDeps: unknown[] = [
+    client,
+    request,
+    args.pause,
+    args.requestPolicy,
+    args.context,
+  ];
+
   const [meta, setMeta] = useState<{
     source: Source<OperationResult<Data, Variables>> | null;
     prevValue: UseQueryState<Data, Variables>;
-    deps: Array<any>;
+    deps: unknown[];
     suspense: boolean;
-  }>({
-    source: null,
+  }>(() => ({
+    source: args.pause
+      ? null
+      : client.executeQuery(request, {
+          requestPolicy: args.requestPolicy,
+          ...args.context,
+        }),
     prevValue: notFetching,
-    deps: [],
+    deps: currDeps,
     suspense: isSuspense(client, args.context),
-  });
+  }));
 
   const { source, deps, suspense } = meta;
 
@@ -167,23 +180,15 @@ export function useQuery<Data = any, Variables = object>(
     )
   ));
 
-  const currDeps = [
-    client,
-    request,
-    args.pause,
-    args.requestPolicy,
-    args.context,
-  ];
-
   if (hasDepsChanged(deps, currDeps) && !args.pause) {
-    const fetchSource = client.executeQuery(request, {
-      requestPolicy: args.requestPolicy,
-      ...args.context,
-    });
-
     setMeta({
       prevValue: result,
-      source: args.pause ? null : fetchSource,
+      source: args.pause
+        ? null
+        : client.executeQuery(request, {
+            requestPolicy: args.requestPolicy,
+            ...args.context,
+          }),
       deps: currDeps,
       suspense: isSuspense(client, args.context),
     });

From 5667bff1d9571286af3d9ca24053d0b155600840 Mon Sep 17 00:00:00 2001
From: Phil Pluckthun <phil@kitten.sh>
Date: Mon, 31 Jan 2022 12:23:27 +0000
Subject: [PATCH 2/2] Add changeset with clarification

---
 .changeset/funny-pugs-tan.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/funny-pugs-tan.md

diff --git a/.changeset/funny-pugs-tan.md b/.changeset/funny-pugs-tan.md
new file mode 100644
index 0000000000..1dc312dc6b
--- /dev/null
+++ b/.changeset/funny-pugs-tan.md
@@ -0,0 +1,5 @@
+---
+'urql': patch
+---
+
+Update `useQuery` implementation to avoid an aborted render on initial mount. We abort a render-on-update once when the state needs to be updated according to the `OperationResult` source we need to listen to and execute. However, we can avoid this on the initial mount as we've done in a prior version. This fix **does not** change any of the current behaviour, but simply avoids the confusing state transition on mount.