fix(useQuery): prevent hydration mismatch when ssr: false and skip: true are combined (#13128)

Author: phryneas

.changeset/fix-usequery-ssr-skip-hydration.md

@@ -0,0 +1,7 @@
+---
+"@apollo/client": patch
+---
+
+Fix `useQuery` hydration mismatch when `ssr: false` and `skip: true` are used together
+
+When both options were combined, the server would return `loading: false` (because `useSSRQuery` checks `skip` first), but the client's `getServerSnapshot` was returning `ssrDisabledResult` with `loading: true`, causing a hydration mismatch.

config/jest.config.ts

@@ -61,6 +61,7 @@ const react17TestFileIgnoreList = [
   "src/react/hooks/__tests__/useQueryRefHandlers.test.tsx",
   "src/react/query-preloader/__tests__/createQueryPreloader.test.tsx",
   "src/react/ssr/__tests__/prerenderStatic.test.tsx",
+  "src/react/ssr/__tests__/useQueryEndToEnd.test.tsx",
 ];
 
 const tsStandardConfig = {

src/react/hooks/useQuery.ts

@@ -544,6 +544,7 @@ function useResult<TData, TVariables extends OperationVariables>(
   ssr: boolean | undefined
 ) {
   "use no memo";
+  const fetchPolicy = observable.options.fetchPolicy;
   return useSyncExternalStore(
     React.useCallback(
       (handleStoreChange) => {
@@ -591,7 +592,13 @@ function useResult<TData, TVariables extends OperationVariables>(
       [observable, resultData]
     ),
     () => resultData.current,
-    () => (ssr === false ? useQuery.ssrDisabledResult : resultData.current)
+    () =>
+      (
+        (fetchPolicy !== "standby" && ssr === false) ||
+        fetchPolicy === "no-cache"
+      ) ?
+        useQuery.ssrDisabledResult
+      : resultData.current
   );
 }
 

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

@@ -0,0 +1,111 @@
+import { screen, waitFor } from "@testing-library/react";
+import React from "react";
+import { hydrateRoot } from "react-dom/client";
+import { renderToString } from "react-dom/server";
+
+import { ApolloClient, gql, InMemoryCache } from "@apollo/client";
+import { ApolloProvider, useQuery } from "@apollo/client/react";
+import { prerenderStatic } from "@apollo/client/react/ssr";
+import { MockLink } from "@apollo/client/testing";
+
+it("should not cause a hydration mismatch when both ssr: false and skip: true are set", async () => {
+  const query = gql`
+    {
+      hello
+    }
+  `;
+  const mocks = [
+    {
+      request: { query },
+      result: { data: { hello: "world" } },
+    },
+  ];
+
+  const rendered: Array<{
+    loading: boolean;
+    data: unknown;
+    networkStatus: number;
+    hasMounted: boolean;
+  }> = [];
+
+  const Component = () => {
+    const {
+      loading,
+      data = "<undefined>",
+      networkStatus,
+    } = useQuery(query, {
+      ssr: false,
+      skip: true,
+    });
+    const [hasMounted, setHasMounted] = React.useState(false);
+    React.useEffect(() => {
+      setHasMounted(true);
+    }, []);
+    rendered.push({ loading, data, networkStatus, hasMounted });
+    return (
+      <div id="target">
+        {JSON.stringify({ loading, data, networkStatus, hasMounted })}
+      </div>
+    );
+  };
+
+  const serverClient = new ApolloClient({
+    cache: new InMemoryCache(),
+    link: new MockLink(mocks),
+  });
+
+  const { result } = await prerenderStatic({
+    tree: <Component />,
+    renderFunction: renderToString,
+    context: { client: serverClient },
+  });
+  expect(result).toMatchInlineSnapshot(
+    `"<div id=\\"target\\">{&quot;loading&quot;:false,&quot;data&quot;:&quot;&lt;undefined&gt;&quot;,&quot;networkStatus&quot;:7,&quot;hasMounted&quot;:false}</div>"`
+  );
+
+  expect(serverClient.extract()).toEqual({});
+
+  const container = document.createElement("div");
+  container.innerHTML = result;
+  document.body.appendChild(container);
+
+  const clientClient = new ApolloClient({
+    cache: new InMemoryCache(),
+    link: new MockLink(mocks),
+  });
+
+  const hydrationErrors: unknown[] = [];
+  const root = hydrateRoot(
+    container,
+    <ApolloProvider client={clientClient}>
+      <Component />
+    </ApolloProvider>,
+    {
+      onRecoverableError: (err) => hydrationErrors.push(err),
+    }
+  );
+
+  await waitFor(() => {
+    expect(
+      screen.getByText(
+        JSON.stringify({
+          loading: false,
+          data: "<undefined>",
+          networkStatus: 7,
+          hasMounted: true,
+        })
+      )
+    ).toBeInTheDocument();
+  });
+
+  expect(hydrationErrors).toHaveLength(0);
+
+  expect(
+    rendered.every(({ data, loading, networkStatus }) => {
+      return data === "<undefined>" && loading === false && networkStatus === 7;
+    })
+  ).toBe(true);
+
+  root.unmount();
+  document.body.removeChild(container);
+});