Fix failing regression test for skipped SSR useQuery stuck in standby

CHANGELOG.md

@@ -11,6 +11,9 @@
 - Update `ts-invariant` to version 0.10.2 to fix source map warnings. <br/>
   [@benjamn](https://github.com/benjamn) in [#9672](https://github.com/apollographql/apollo-client/pull/9672)
 
+- Test that `useQuery` queries with `skip: true` do not stall server-side rendering. <br/>
+  [@nathanmarks](https://github.com/nathanmarks) and [@benjamn](https://github.com/benjamn) in [#9677](https://github.com/apollographql/apollo-client/pull/9677)
+
 ## Apollo Client 3.6.2 (2022-05-02)
 
 ### Bug Fixes

src/react/hooks/useQuery.ts

@@ -384,15 +384,15 @@ class InternalState<TData, TVariables> {
       subscribeToMore: obsQuery.subscribeToMore.bind(obsQuery),
     }), [obsQuery]);
 
-    if (this.renderPromises) {
-      this.renderPromises.registerSSRObservable(obsQuery);
+    const ssrAllowed = !(
+      this.queryHookOptions.ssr === false ||
+      this.queryHookOptions.skip
+    );
 
-      const ssrAllowed = !(
-        this.queryHookOptions.ssr === false ||
-        this.queryHookOptions.skip
-      );
+    if (this.renderPromises && ssrAllowed) {
+      this.renderPromises.registerSSRObservable(obsQuery);
 
-      if (ssrAllowed && obsQuery.getCurrentResult().loading) {
+      if (obsQuery.getCurrentResult().loading) {
         // TODO: This is a legacy API which could probably be cleaned up
         this.renderPromises.addObservableQueryPromise(obsQuery);
       }

src/react/ssr/__tests__/useQuery.test.tsx

@@ -184,6 +184,56 @@ describe('useQuery Hook SSR', () => {
     });
   });
 
+  it('should render SSR tree rendering if `skip` option is `true` for only one instance of the query', async () => {
+    let renderCount = 0;
+
+    const AnotherComponent = () => {
+      const {
+        loading,
+        data,
+      } = useQuery(CAR_QUERY, { skip: false });
+
+      renderCount += 1;
+
+      if (!loading) {
+        expect(data).toEqual(CAR_RESULT_DATA);
+        const { make, model, vin } = data.cars[0];
+        return (
+          <div>
+            {make}, {model}, {vin}
+          </div>
+        );
+      }
+
+      return null;
+    };
+
+    const Component = () => {
+      const {
+        loading,
+        data,
+      } = useQuery(CAR_QUERY, { skip: true });
+      renderCount += 1;
+
+      expect(loading).toBeFalsy();
+      expect(data).toBeUndefined();
+
+      return <AnotherComponent />;
+    };
+
+    const app = (
+      <MockedProvider mocks={CAR_MOCKS}>
+        <Component />
+      </MockedProvider>
+    );
+
+    return renderToStringWithData(app).then(result => {
+      expect(renderCount).toBe(4);
+      expect(result).toMatch(/Audi/);
+      expect(result).toMatch(/RS8/);
+    });
+  });
+
   it('should return data written previously to cache during SSR pass if using cache-only fetchPolicy', async () => {
     const cache = new InMemoryCache({
       typePolicies: {