Fix issue with useQuery returning loading: true state during SSR …

…with `skip: true` (#9679)

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

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.

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({