[Bug] Support SSR for ApiItem (#314)

* Add createStoreWithoutState

* Refactor to support SSR and client-side hydration

* Remove comment

* Use isBrowser to conditionally render ApiDemoPanel

* Experimenting with not persisting content-type and accept

* Remove schema tab groupId and update TODO

Co-authored-by: Bryan <[email protected]>

Author: sserrata

packages/docusaurus-plugin-openapi-docs/src/markdown/createResponseSchema.ts

@@ -746,7 +746,8 @@ export function createResponseSchema({ title, body, ...rest }: Props) {
           value: `${mimeType}`,
           children: [
             create("SchemaTabs", {
-              groupId: "schema-tabs",
+              // TODO: determine if we should persist this
+              // groupId: "schema-tabs",
               children: [
                 firstBody &&
                   create("TabItem", {

packages/docusaurus-theme-openapi-docs/src/theme/ApiDemoPanel/persistanceMiddleware.ts

@@ -40,13 +40,14 @@ export function createPersistanceMiddleware(options: ThemeConfig["api"]) {
         }
       }
 
-      if (action.type === "contentType/setContentType") {
-        storage.setItem("contentType", action.payload);
-      }
+      // TODO: determine way to rehydrate without flashing
+      // if (action.type === "contentType/setContentType") {
+      //   storage.setItem("contentType", action.payload);
+      // }
 
-      if (action.type === "accept/setAccept") {
-        storage.setItem("accept", action.payload);
-      }
+      // if (action.type === "accept/setAccept") {
+      //   storage.setItem("accept", action.payload);
+      // }
 
       if (action.type === "server/setServer") {
         storage.setItem("server", action.payload);

packages/docusaurus-theme-openapi-docs/src/theme/ApiItem/index.tsx

@@ -11,8 +11,8 @@ import BrowserOnly from "@docusaurus/BrowserOnly";
 import ExecutionEnvironment from "@docusaurus/ExecutionEnvironment";
 import { HtmlClassNameProvider } from "@docusaurus/theme-common";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import useIsBrowser from "@docusaurus/useIsBrowser";
 import type { Props } from "@theme/DocItem";
-import clsx from "clsx";
 import { ServerObject } from "docusaurus-plugin-openapi-docs/lib/openapi/types";
 import type { ApiItem as ApiItemType } from "docusaurus-plugin-openapi-docs/lib/types";
 import { ParameterObject } from "docusaurus-plugin-openapi-docs/src/openapi/types";
@@ -24,13 +24,11 @@ import { createAuth } from "../ApiDemoPanel/Authorization/slice";
 import { createPersistanceMiddleware } from "../ApiDemoPanel/persistanceMiddleware";
 import DocItemLayout from "./Layout";
 import DocItemMetadata from "./Metadata";
-import { createStoreWithState } from "./store";
+import { createStoreWithoutState, createStoreWithState } from "./store";
 
 const { DocProvider } = require("@docusaurus/theme-common/internal");
 
-let ApiDemoPanel = (_: { item: any; infoPath: any }) => (
-  <div style={{ marginTop: "3.5em" }} />
-);
+let ApiDemoPanel = (_: { item: any; infoPath: any }) => <div />;
 
 if (ExecutionEnvironment.canUseDOM) {
   ApiDemoPanel = require("@theme/ApiDemoPanel").default;
@@ -49,8 +47,19 @@ export default function ApiItem(props: Props): JSX.Element {
   const { siteConfig } = useDocusaurusContext();
   const themeConfig = siteConfig.themeConfig as ThemeConfig;
   const options = themeConfig.api;
+  const isBrowser = useIsBrowser();
 
-  const ApiDocContent = () => {
+  // Define store2
+  let store2: any = {};
+  const persistanceMiddleware = createPersistanceMiddleware(options);
+
+  // Init store for SSR
+  if (!isBrowser) {
+    store2 = createStoreWithoutState({}, [persistanceMiddleware]);
+  }
+
+  // Init store for CSR to hydrate components
+  if (isBrowser) {
     const acceptArray = Array.from(
       new Set(
         Object.values(api?.responses ?? {})
@@ -79,20 +88,20 @@ export default function ApiItem(props: Props): JSX.Element {
       securitySchemes: api?.securitySchemes,
       options,
     });
-    const acceptValue = window?.sessionStorage.getItem("accept");
-    const contentTypeValue = window?.sessionStorage.getItem("contentType");
+    // TODO: determine way to rehydrate without flashing
+    // const acceptValue = window?.sessionStorage.getItem("accept");
+    // const contentTypeValue = window?.sessionStorage.getItem("contentType");
     const server = window?.sessionStorage.getItem("server");
     const serverObject = (JSON.parse(server!) as ServerObject) ?? {};
 
-    const persistanceMiddleware = createPersistanceMiddleware(options);
-    const store2 = createStoreWithState(
+    store2 = createStoreWithState(
       {
         accept: {
-          value: acceptValue || acceptArray[0],
+          value: acceptArray[0],
           options: acceptArray,
         },
         contentType: {
-          value: contentTypeValue || contentTypeArray[0],
+          value: contentTypeArray[0],
           options: contentTypeArray,
         },
         server: {
@@ -106,50 +115,42 @@ export default function ApiItem(props: Props): JSX.Element {
       },
       [persistanceMiddleware]
     );
-
-    return (
-      <Provider store={store2}>
-        <div className="row">
-          <div className={clsx("col", api ? "col--7" : "col--12")}>
-            <MDXComponent />
-          </div>
-          {api && (
-            <div className="col col--5">
-              <ApiDemoPanel item={api} infoPath={infoPath} />
-            </div>
-          )}
-        </div>
-      </Provider>
-    );
-  };
+  }
 
   if (api) {
-    // TODO: determine if there's a way to SSR and hydrate ApiItem/ApiDemoPanel
     return (
       <DocProvider content={props.content}>
         <HtmlClassNameProvider className={docHtmlClassName}>
           <DocItemMetadata />
           <DocItemLayout>
-            {
-              <BrowserOnly fallback={<div />}>
-                {() => {
-                  return <ApiDocContent />;
-                }}
-              </BrowserOnly>
-            }
+            <Provider store={store2}>
+              <div className="row">
+                <div className="col col--7">
+                  <MDXComponent />
+                </div>
+                <div className="col col--5">
+                  <BrowserOnly fallback={<div>Loading...</div>}>
+                    {() => {
+                      return <ApiDemoPanel item={api} infoPath={infoPath} />;
+                    }}
+                  </BrowserOnly>
+                </div>
+              </div>
+            </Provider>
           </DocItemLayout>
         </HtmlClassNameProvider>
       </DocProvider>
     );
   }
+
   // Non-API docs
   return (
     <DocProvider content={props.content}>
       <HtmlClassNameProvider className={docHtmlClassName}>
         <DocItemMetadata />
         <DocItemLayout>
           <div className="row">
-            <div className={clsx("col col--12")}>
+            <div className="col col--12">
               <MDXComponent />
             </div>
           </div>

packages/docusaurus-theme-openapi-docs/src/theme/ApiItem/store.ts

@@ -38,4 +38,15 @@ export const createStoreWithState = (
       getDefaultMiddleware().concat(...middlewares),
   });
 
+export const createStoreWithoutState = (
+  preloadedState: {},
+  middlewares: any[]
+) =>
+  configureStore({
+    reducer: rootReducer,
+    preloadedState,
+    middleware: (getDefaultMiddleware) =>
+      getDefaultMiddleware().concat(...middlewares),
+  });
+
 export type AppDispatch = ReturnType<typeof createStoreWithState>["dispatch"];