From 51848452b831484f8dde01ffbebdee1f59f2e18a Mon Sep 17 00:00:00 2001
From: Masayuki Izumi <m@izum.in>
Date: Thu, 19 Nov 2020 06:31:37 +0900
Subject: [PATCH] Avoid registering QueryPromise when skip is true during SSR
 (#7310)

---
 CHANGELOG.md                              |  3 +++
 src/react/data/QueryData.ts               |  3 ++-
 src/react/ssr/__tests__/useQuery.test.tsx | 25 +++++++++++++++++++++++
 3 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ec9bfa1df78..8b05e0936cd 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -64,6 +64,9 @@
 - Allow optional arguments in `keyArgs: [...]` arrays for `InMemoryCache` field policies. <br/>
   [@benjamn](https://github.com/benjamn) in [#7109](https://github.com/apollographql/apollo-client/pull/7109)
 
+- Avoid registering `QueryPromise` when `skip` is `true` during server-side rendering. <br/>
+  [@izumin5210](https://github.com/izumin5210) in [#7310](https://github.com/apollographql/apollo-client/pull/7310)
+
 ## Apollo Client 3.2.7
 
 ## Bug Fixes
diff --git a/src/react/data/QueryData.ts b/src/react/data/QueryData.ts
index 7ae527df065..be45d87e7c7 100644
--- a/src/react/data/QueryData.ts
+++ b/src/react/data/QueryData.ts
@@ -152,7 +152,8 @@ export class QueryData<TData, TVariables> extends OperationData {
   };
 
   private getExecuteSsrResult() {
-    const ssrDisabled = this.getOptions().ssr === false;
+    const { ssr, skip } = this.getOptions();
+    const ssrDisabled = ssr === false || skip;
     const fetchDisabled = this.refreshClient().client.disableNetworkFetches;
 
     const ssrLoading = {
diff --git a/src/react/ssr/__tests__/useQuery.test.tsx b/src/react/ssr/__tests__/useQuery.test.tsx
index 176a30fe64b..6f01f81c099 100644
--- a/src/react/ssr/__tests__/useQuery.test.tsx
+++ b/src/react/ssr/__tests__/useQuery.test.tsx
@@ -166,4 +166,29 @@ describe('useQuery Hook SSR', () => {
       });
     }
   );
+
+  it('should skip SSR tree rendering if `skip` option is `true`', async () => {
+    let renderCount = 0;
+    const Component = () => {
+      const { data, loading } = useQuery(CAR_QUERY, { skip: true });
+      renderCount += 1;
+
+      if (!loading) {
+        const { make } = data.cars[0];
+        return <div>{make}</div>;
+      }
+      return null;
+    };
+
+    const app = (
+      <MockedProvider mocks={CAR_MOCKS}>
+        <Component />
+      </MockedProvider>
+    );
+
+    return renderToStringWithData(app).then((result) => {
+      expect(renderCount).toBe(1);
+      expect(result).toEqual('');
+    });
+  });
 });