From 95c8a1a8211302b07dddd0a5e6e67119111009d7 Mon Sep 17 00:00:00 2001
From: Nathan <nathanmarks@users.noreply.github.com>
Date: Thu, 5 May 2022 17:35:02 -0400
Subject: [PATCH] Fix issue with `useQuery` returning `loading: true` state
 during SSR with `skip: true` (#9679)

---
 CHANGELOG.md                              |  3 +++
 src/react/hooks/useQuery.ts               |  3 ++-
 src/react/ssr/__tests__/useQuery.test.tsx | 28 ++++++++++++++++++++++-
 3 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index efdfef999d7..94436061843 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,9 @@
 - Prevent `useLazyQuery` from making duplicate requests when its execution function is first called, and stop rejecting the `Promise` it returns when `result.error` is defined. <br/>
   [@benjamn](https://github.com/benjamn) in [#9684](https://github.com/apollographql/apollo-client/pull/9684)
 
+- Fix issue with `useQuery` returning `loading: true` state during server-side rendering with `skip: true`. <br/>
+  [@nathanmarks](https://github.com/nathanmarks) in [#9679](https://github.com/apollographql/apollo-client/pull/9679)
+
 ## Apollo Client 3.6.2 (2022-05-02)
 
 ### Bug Fixes
diff --git a/src/react/hooks/useQuery.ts b/src/react/hooks/useQuery.ts
index a6c45f4cbb5..5faba104f6a 100644
--- a/src/react/hooks/useQuery.ts
+++ b/src/react/hooks/useQuery.ts
@@ -288,7 +288,8 @@ class InternalState<TData, TVariables> {
 
     if (
       (this.renderPromises || this.client.disableNetworkFetches) &&
-      this.queryHookOptions.ssr === false
+      this.queryHookOptions.ssr === false &&
+      !this.queryHookOptions.skip
     ) {
       // If SSR has been explicitly disabled, and this function has been called
       // on the server side, return the default loading state.
diff --git a/src/react/ssr/__tests__/useQuery.test.tsx b/src/react/ssr/__tests__/useQuery.test.tsx
index 7b40ef7131a..1abf5304366 100644
--- a/src/react/ssr/__tests__/useQuery.test.tsx
+++ b/src/react/ssr/__tests__/useQuery.test.tsx
@@ -83,12 +83,14 @@ describe('useQuery Hook SSR', () => {
     return renderToStringWithData(app);
   });
 
-  it('should skip SSR tree rendering if `ssr` option is `false`', async () => {
+  it('should skip SSR tree rendering and return a loading state if `ssr` option is `false`', async () => {
     let renderCount = 0;
     const Component = () => {
       const { data, loading } = useQuery(CAR_QUERY, { ssr: false });
       renderCount += 1;
 
+      expect(loading).toBeTruthy();
+
       if (!loading) {
         const { make } = data.cars[0];
         return <div>{make}</div>;
@@ -108,6 +110,30 @@ describe('useQuery Hook SSR', () => {
     });
   });
 
+  it('should skip SSR tree rendering and not return a loading state loading if `ssr` option is `false` and `skip` is `true`', async () => {
+    let renderCount = 0;
+    const Component = () => {
+      const { data, loading } = useQuery(CAR_QUERY, { ssr: false, skip: true });
+      renderCount += 1;
+
+      expect(loading).toBeFalsy();
+      expect(data).toBeUndefined();
+
+      return null;
+    };
+
+    const app = (
+      <MockedProvider mocks={CAR_MOCKS}>
+        <Component />
+      </MockedProvider>
+    );
+
+    return renderToStringWithData(app).then(result => {
+      expect(renderCount).toBe(1);
+      expect(result).toEqual('');
+    });
+  });
+
   it('should skip both SSR tree rendering and SSR component rendering if `ssr` option is `false` and `ssrMode` is `true`',
     async () => {
       const link = mockSingleLink({