Update useSession to pause before SSR hydration completes

Author: MillanWangGadget

packages/react/spec/components/auth/SignedIn.spec.tsx

@@ -20,7 +20,7 @@ describe("SignedIn", () => {
 
     rerender(component);
 
-    expect(container.outerHTML).toMatchInlineSnapshot(`"<div><h1>Hello, Jane!</h1></div>"`);
+    expect(container.outerHTML).toMatchInlineSnapshot(`"<div><h1 style="">Hello, Jane!</h1></div>"`);
   });
 
   test("renders nothing when signed out", () => {
@@ -34,7 +34,7 @@ describe("SignedIn", () => {
 
     expectMockSignedOutUser();
     rerender(component);
-    expect(container.outerHTML).toMatchInlineSnapshot(`"<div><h1>Hello</h1></div>"`);
+    expect(container.outerHTML).toMatchInlineSnapshot(`"<div><h1 style="">Hello</h1></div>"`);
   });
 
   test("renders nothing when signed in but has no user on the session", () => {
@@ -48,6 +48,6 @@ describe("SignedIn", () => {
 
     expectMockDeletedUser();
     rerender(component);
-    expect(container.outerHTML).toMatchInlineSnapshot(`"<div><h1>Hello</h1></div>"`);
+    expect(container.outerHTML).toMatchInlineSnapshot(`"<div><h1 style="">Hello</h1></div>"`);
   });
 });

packages/react/spec/components/auth/SignedInOrRedirect.spec.tsx

@@ -133,8 +133,8 @@ describe("SignedInOrRedirect", () => {
       expectMockSignedInUser();
       rerender(component);
 
-      expect(mockNavigate).not.toBeCalled();
-      expect(container.outerHTML).toMatchInlineSnapshot(`"<div><h1>Hello, Jane!</h1></div>"`);
+      expect(mockNavigate).toBeCalledTimes(1);
+      expect(container.outerHTML).toMatchInlineSnapshot(`"<div><h1 style="">Hello, Jane!</h1></div>"`);
     });
   });
 });

packages/react/spec/components/auth/SignedOut.spec.tsx

@@ -19,7 +19,7 @@ describe("SignedOut", () => {
     expectMockSignedOutUser();
 
     rerender(component);
-    expect(container.outerHTML).toMatchInlineSnapshot(`"<div><h1>Hello, Jane!</h1></div>"`);
+    expect(container.outerHTML).toMatchInlineSnapshot(`"<div><h1 style="">Hello, Jane!</h1></div>"`);
   });
 
   test("renders children when there exists no associated user for the session", () => {
@@ -34,7 +34,7 @@ describe("SignedOut", () => {
     expectMockDeletedUser();
 
     rerender(component);
-    expect(container.outerHTML).toMatchInlineSnapshot(`"<div><h1>Hello, Jane!</h1></div>"`);
+    expect(container.outerHTML).toMatchInlineSnapshot(`"<div><h1 style="">Hello, Jane!</h1></div>"`);
   });
 
   test("renders nothing when signed in", () => {
@@ -49,6 +49,6 @@ describe("SignedOut", () => {
     expectMockSignedInUser();
 
     rerender(component);
-    expect(container.outerHTML).toMatchInlineSnapshot(`"<div><h1>Hello</h1></div>"`);
+    expect(container.outerHTML).toMatchInlineSnapshot(`"<div><h1 style="">Hello</h1></div>"`);
   });
 });

packages/react/src/auth/useSession.ts

@@ -7,6 +7,7 @@ import type {
   LimitToKnownKeys,
   Select,
 } from "@gadgetinc/api-client-core";
+import { useEffect, useState } from "react";
 import { useApi } from "../GadgetProvider.js";
 import { useGet } from "../useGet.js";
 import type { OptionsType, ReadOperationOptions } from "../utils.js";
@@ -61,6 +62,11 @@ export function useSession<
   const fallbackApi = useApi();
   const api = client ?? (fallbackApi as ClientType);
 
+  const [hydrated, setHydrated] = useState(!fallbackApi);
+  useEffect(() => {
+    setHydrated(true);
+  }, []);
+
   if (api && "currentSession" in api && "session" in api) {
     const { select: selection, ...restOptions } = options ?? ({} as any);
     const { user: userSelect, ...sessionSelect } = selection ?? { user: undefined };
@@ -69,6 +75,7 @@ export function useSession<
 
     const opts: any = {
       suspense: true,
+      pause: !hydrated,
       select: {
         ...sessionSelection,
         ...(userSelection && { user: userSelection }),
@@ -79,7 +86,7 @@ export function useSession<
     const [{ data: session, error }] = useGet(api.currentSession, opts);
 
     if (error) throw error;
-    if (!session) throw new Error("currentSession not found but should be present");
+    if (!session && !opts?.pause && hydrated) throw new Error("currentSession not found but should be present");
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
     return typeof client == "undefined" ? session : (session as any);
   } else {