zudoku 0.35.6 → 0.36.0

package/src/lib/plugins/openapi/OperationList.tsx

@@ -1,5 +1,5 @@
 import { type ResultOf } from "@graphql-typed-document-node/core";
-import { useSuspenseQuery } from "@tanstack/react-query";
+import { useQuery, useSuspenseQuery } from "@tanstack/react-query";
 import { Helmet } from "@zudoku/react-helmet-async";
 import { ChevronsDownUpIcon, ChevronsUpDownIcon } from "lucide-react";
 import { useNavigate } from "react-router";
@@ -97,8 +97,16 @@ export const OperationsFragment = graphql(/* GraphQL */ `
 
 export type OperationListItemResult = ResultOf<typeof OperationsFragment>;
 
-const AllOperationsQuery = graphql(/* GraphQL */ `
-  query AllOperations(
+const SchemaWarmupQuery = graphql(/* GraphQL */ `
+  query SchemaWarmup($input: JSON!, $type: SchemaType!) {
+    schema(input: $input, type: $type) {
+      openapi
+    }
+  }
+`);
+
+const OperationsForTagQuery = graphql(/* GraphQL */ `
+  query OperationsForTag(
     $input: JSON!
     $type: SchemaType!
     $tag: String
@@ -133,7 +141,7 @@ export const OperationList = ({
   untagged?: boolean;
 }) => {
   const { input, type, versions, version, options } = useOasConfig();
-  const query = useCreateQuery(AllOperationsQuery, {
+  const query = useCreateQuery(OperationsForTagQuery, {
     input,
     type,
     tag,
@@ -151,6 +159,14 @@ export const OperationList = ({
   const operations = schema.operations;
   const tagDescription = schema.tags.find((t) => t.name === tag)?.description;
 
+  // This is to warmup (i.e. load the schema in the background) the schema on the client, if the page has been rendered on the server
+  const warmupQuery = useCreateQuery(SchemaWarmupQuery, { input, type });
+  useQuery({
+    ...warmupQuery,
+    enabled: typeof window !== "undefined",
+    notifyOnChangeProps: [],
+  });
+
   // Prefetch for Playground
   useApiIdentities();
 
@@ -269,38 +285,16 @@ export const OperationList = ({
       <div className="my-4 flex items-center justify-end gap-4">
         <Endpoint />
       </div>
-      {operations.map((fragment) => (
-        <OperationListItem
-          serverUrl={selectedServer}
-          key={fragment.slug}
-          operationFragment={fragment}
-        />
-      ))}
-      {/* {schema.tags
-        .filter((tag) => tag.operations.length > 0)
-        .map((tag) => (
-          // px, -mx is so that `content-visibility` doesn't cut off overflown heading anchor links '#'
-          <div key={tag.name} className="px-6 -mx-6 [content-visibility:auto]">
-            {tag.name && <CategoryHeading>{tag.name}</CategoryHeading>}
-            {tag.description && (
-              <Markdown
-                className={`${ProseClasses} max-w-full prose-img:max-w-prose w-full mt-2 mb-12`}
-                content={tag.description}
-              />
-            )}
-            <div className="operation mb-12">
-              <StaggeredRender>
-                {tag.operations.map((fragment) => (
-                  <OperationListItem
-                    serverUrl={selectedServer ?? schema.url}
-                    key={fragment.slug}
-                    operationFragment={fragment}
-                  />
-                ))}
-              </StaggeredRender>
-            </div>
-          </div>
-        ))} */}
+      {/* px, -mx is so that `content-visibility` doesn't cut off overflown heading anchor links '#' */}
+      <div className="px-6 -mx-6 [content-visibility:auto]">
+        {operations.map((fragment) => (
+          <OperationListItem
+            serverUrl={selectedServer}
+            key={fragment.slug}
+            operationFragment={fragment}
+          />
+        ))}
+      </div>
     </div>
   );
 };

package/src/lib/plugins/openapi/OperationListItem.tsx

@@ -63,7 +63,7 @@ export const OperationListItem = ({
           <SelectOnClick className="max-w-full truncate flex cursor-pointer">
             {serverUrl && (
               <div className="text-neutral-400 dark:text-neutral-500 truncate">
-                {serverUrl}
+                {serverUrl.replace(/\/$/, "")}
               </div>
             )}
             <div className="text-neutral-900 dark:text-neutral-200">

package/src/lib/plugins/openapi/Sidecar.tsx

@@ -173,9 +173,9 @@ export const Sidecar = ({
   const showPlayground =
     isOnScreen &&
     (operation.extensions["x-explorer-enabled"] === true ||
-      operation.extensions["x-playground-enabled"] === true ||
+      operation.extensions["x-zudoku-playground-enabled"] === true ||
       (operation.extensions["x-explorer-enabled"] === undefined &&
-        operation.extensions["x-playground-enabled"] === undefined &&
+        operation.extensions["x-zudoku-playground-enabled"] === undefined &&
         !options?.disablePlayground));
 
   return (

package/src/lib/plugins/openapi/client/useCreateQuery.ts

@@ -1,3 +1,4 @@
+import { stripIgnoredCharacters } from "graphql";
 import { useContext } from "react";
 import type { TypedDocumentString } from "../graphql/graphql.js";
 import { GraphQLContext } from "./GraphQLContext.js";
@@ -13,6 +14,6 @@ export const useCreateQuery = <TResult, TVariables>(
 
   return {
     queryFn: () => graphQLClient.fetch(query, ...variables),
-    queryKey: [query, variables[0]],
+    queryKey: [stripIgnoredCharacters(query.toString()), variables[0]],
   } as const;
 };

package/src/lib/plugins/openapi/graphql/gql.ts

@@ -15,24 +15,24 @@ import * as types from "./graphql.js";
 type Documents = {
   "\n  query ServersQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n      servers {\n        url\n      }\n    }\n  }\n": typeof types.ServersQueryDocument;
   "\n  fragment OperationsFragment on OperationItem {\n    slug\n    summary\n    method\n    description\n    operationId\n    contentTypes\n    path\n    deprecated\n    extensions\n    parameters {\n      name\n      in\n      description\n      required\n      schema\n      style\n      explode\n      examples {\n        name\n        description\n        externalValue\n        value\n        summary\n      }\n    }\n    requestBody {\n      content {\n        mediaType\n        encoding {\n          name\n        }\n        examples {\n          name\n          description\n          externalValue\n          value\n          summary\n        }\n        schema\n      }\n      description\n      required\n    }\n    responses {\n      statusCode\n      links\n      description\n      content {\n        examples {\n          name\n          description\n          externalValue\n          value\n          summary\n        }\n        mediaType\n        encoding {\n          name\n        }\n        schema\n      }\n    }\n  }\n": typeof types.OperationsFragmentFragmentDoc;
-  "\n  query AllOperations(\n    $input: JSON!\n    $type: SchemaType!\n    $tag: String\n    $untagged: Boolean\n  ) {\n    schema(input: $input, type: $type) {\n      servers {\n        url\n      }\n      description\n      summary\n      title\n      url\n      version\n      tags(name: $tag) {\n        name\n        description\n      }\n      operations(tag: $tag, untagged: $untagged) {\n        slug\n        ...OperationsFragment\n      }\n    }\n  }\n": typeof types.AllOperationsDocument;
+  "\n  query SchemaWarmup($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      openapi\n    }\n  }\n": typeof types.SchemaWarmupDocument;
+  "\n  query OperationsForTag(\n    $input: JSON!\n    $type: SchemaType!\n    $tag: String\n    $untagged: Boolean\n  ) {\n    schema(input: $input, type: $type) {\n      servers {\n        url\n      }\n      description\n      summary\n      title\n      url\n      version\n      tags(name: $tag) {\n        name\n        description\n      }\n      operations(tag: $tag, untagged: $untagged) {\n        slug\n        ...OperationsFragment\n      }\n    }\n  }\n": typeof types.OperationsForTagDocument;
   "\n  query getServerQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n      servers {\n        url\n      }\n    }\n  }\n": typeof types.GetServerQueryDocument;
-  "\n  query GetCategories($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n      tags {\n        name\n      }\n    }\n  }\n": typeof types.GetCategoriesDocument;
-  "\n  query GetOperations($input: JSON!, $type: SchemaType!, $tag: String) {\n    schema(input: $input, type: $type) {\n      operations(tag: $tag) {\n        slug\n        deprecated\n        method\n        summary\n        operationId\n        path\n        tags {\n          name\n        }\n      }\n      untagged: operations(untagged: true) {\n        slug\n        deprecated\n        method\n        summary\n        operationId\n        path\n      }\n    }\n  }\n": typeof types.GetOperationsDocument;
+  "\n  query GetSidebarOperations($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      tags {\n        slug\n        name\n        extensions\n        operations {\n          summary\n          slug\n          method\n          operationId\n          path\n        }\n      }\n    }\n  }\n": typeof types.GetSidebarOperationsDocument;
 };
 const documents: Documents = {
   "\n  query ServersQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n      servers {\n        url\n      }\n    }\n  }\n":
     types.ServersQueryDocument,
   "\n  fragment OperationsFragment on OperationItem {\n    slug\n    summary\n    method\n    description\n    operationId\n    contentTypes\n    path\n    deprecated\n    extensions\n    parameters {\n      name\n      in\n      description\n      required\n      schema\n      style\n      explode\n      examples {\n        name\n        description\n        externalValue\n        value\n        summary\n      }\n    }\n    requestBody {\n      content {\n        mediaType\n        encoding {\n          name\n        }\n        examples {\n          name\n          description\n          externalValue\n          value\n          summary\n        }\n        schema\n      }\n      description\n      required\n    }\n    responses {\n      statusCode\n      links\n      description\n      content {\n        examples {\n          name\n          description\n          externalValue\n          value\n          summary\n        }\n        mediaType\n        encoding {\n          name\n        }\n        schema\n      }\n    }\n  }\n":
     types.OperationsFragmentFragmentDoc,
-  "\n  query AllOperations(\n    $input: JSON!\n    $type: SchemaType!\n    $tag: String\n    $untagged: Boolean\n  ) {\n    schema(input: $input, type: $type) {\n      servers {\n        url\n      }\n      description\n      summary\n      title\n      url\n      version\n      tags(name: $tag) {\n        name\n        description\n      }\n      operations(tag: $tag, untagged: $untagged) {\n        slug\n        ...OperationsFragment\n      }\n    }\n  }\n":
-    types.AllOperationsDocument,
+  "\n  query SchemaWarmup($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      openapi\n    }\n  }\n":
+    types.SchemaWarmupDocument,
+  "\n  query OperationsForTag(\n    $input: JSON!\n    $type: SchemaType!\n    $tag: String\n    $untagged: Boolean\n  ) {\n    schema(input: $input, type: $type) {\n      servers {\n        url\n      }\n      description\n      summary\n      title\n      url\n      version\n      tags(name: $tag) {\n        name\n        description\n      }\n      operations(tag: $tag, untagged: $untagged) {\n        slug\n        ...OperationsFragment\n      }\n    }\n  }\n":
+    types.OperationsForTagDocument,
   "\n  query getServerQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n      servers {\n        url\n      }\n    }\n  }\n":
     types.GetServerQueryDocument,
-  "\n  query GetCategories($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n      tags {\n        name\n      }\n    }\n  }\n":
-    types.GetCategoriesDocument,
-  "\n  query GetOperations($input: JSON!, $type: SchemaType!, $tag: String) {\n    schema(input: $input, type: $type) {\n      operations(tag: $tag) {\n        slug\n        deprecated\n        method\n        summary\n        operationId\n        path\n        tags {\n          name\n        }\n      }\n      untagged: operations(untagged: true) {\n        slug\n        deprecated\n        method\n        summary\n        operationId\n        path\n      }\n    }\n  }\n":
-    types.GetOperationsDocument,
+  "\n  query GetSidebarOperations($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      tags {\n        slug\n        name\n        extensions\n        operations {\n          summary\n          slug\n          method\n          operationId\n          path\n        }\n      }\n    }\n  }\n":
+    types.GetSidebarOperationsDocument,
 };
 
 /**
@@ -51,26 +51,26 @@ export function graphql(
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(
-  source: "\n  query AllOperations(\n    $input: JSON!\n    $type: SchemaType!\n    $tag: String\n    $untagged: Boolean\n  ) {\n    schema(input: $input, type: $type) {\n      servers {\n        url\n      }\n      description\n      summary\n      title\n      url\n      version\n      tags(name: $tag) {\n        name\n        description\n      }\n      operations(tag: $tag, untagged: $untagged) {\n        slug\n        ...OperationsFragment\n      }\n    }\n  }\n",
-): typeof import("./graphql.js").AllOperationsDocument;
+  source: "\n  query SchemaWarmup($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      openapi\n    }\n  }\n",
+): typeof import("./graphql.js").SchemaWarmupDocument;
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(
-  source: "\n  query getServerQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n      servers {\n        url\n      }\n    }\n  }\n",
-): typeof import("./graphql.js").GetServerQueryDocument;
+  source: "\n  query OperationsForTag(\n    $input: JSON!\n    $type: SchemaType!\n    $tag: String\n    $untagged: Boolean\n  ) {\n    schema(input: $input, type: $type) {\n      servers {\n        url\n      }\n      description\n      summary\n      title\n      url\n      version\n      tags(name: $tag) {\n        name\n        description\n      }\n      operations(tag: $tag, untagged: $untagged) {\n        slug\n        ...OperationsFragment\n      }\n    }\n  }\n",
+): typeof import("./graphql.js").OperationsForTagDocument;
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(
-  source: "\n  query GetCategories($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n      tags {\n        name\n      }\n    }\n  }\n",
-): typeof import("./graphql.js").GetCategoriesDocument;
+  source: "\n  query getServerQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n      servers {\n        url\n      }\n    }\n  }\n",
+): typeof import("./graphql.js").GetServerQueryDocument;
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(
-  source: "\n  query GetOperations($input: JSON!, $type: SchemaType!, $tag: String) {\n    schema(input: $input, type: $type) {\n      operations(tag: $tag) {\n        slug\n        deprecated\n        method\n        summary\n        operationId\n        path\n        tags {\n          name\n        }\n      }\n      untagged: operations(untagged: true) {\n        slug\n        deprecated\n        method\n        summary\n        operationId\n        path\n      }\n    }\n  }\n",
-): typeof import("./graphql.js").GetOperationsDocument;
+  source: "\n  query GetSidebarOperations($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      tags {\n        slug\n        name\n        extensions\n        operations {\n          summary\n          slug\n          method\n          operationId\n          path\n        }\n      }\n    }\n  }\n",
+): typeof import("./graphql.js").GetSidebarOperationsDocument;
 
 export function graphql(source: string) {
   return (documents as any)[source] ?? {};

package/src/lib/plugins/openapi/graphql/graphql.ts

@@ -160,8 +160,10 @@ export type SchemaTagsArgs = {
 export type SchemaTag = {
   __typename?: "SchemaTag";
   description?: Maybe<Scalars["String"]["output"]>;
-  name: Scalars["String"]["output"];
+  extensions?: Maybe<Scalars["JSONObject"]["output"]>;
+  name?: Maybe<Scalars["String"]["output"]>;
   operations: Array<OperationItem>;
+  slug?: Maybe<Scalars["String"]["output"]>;
 };
 
 export type SchemaType = "file" | "raw" | "url";
@@ -263,14 +265,24 @@ export type OperationsFragmentFragment = {
   }>;
 } & { " $fragmentName"?: "OperationsFragmentFragment" };
 
-export type AllOperationsQueryVariables = Exact<{
+export type SchemaWarmupQueryVariables = Exact<{
+  input: Scalars["JSON"]["input"];
+  type: SchemaType;
+}>;
+
+export type SchemaWarmupQuery = {
+  __typename?: "Query";
+  schema: { __typename?: "Schema"; openapi: string };
+};
+
+export type OperationsForTagQueryVariables = Exact<{
   input: Scalars["JSON"]["input"];
   type: SchemaType;
   tag?: InputMaybe<Scalars["String"]["input"]>;
   untagged?: InputMaybe<Scalars["Boolean"]["input"]>;
 }>;
 
-export type AllOperationsQuery = {
+export type OperationsForTagQuery = {
   __typename?: "Query";
   schema: {
     __typename?: "Schema";
@@ -282,7 +294,7 @@ export type AllOperationsQuery = {
     servers: Array<{ __typename?: "Server"; url: string }>;
     tags: Array<{
       __typename?: "SchemaTag";
-      name: string;
+      name?: string | null;
       description?: string | null;
     }>;
     operations: Array<
@@ -309,48 +321,28 @@ export type GetServerQueryQuery = {
   };
 };
 
-export type GetCategoriesQueryVariables = Exact<{
-  input: Scalars["JSON"]["input"];
-  type: SchemaType;
-}>;
-
-export type GetCategoriesQuery = {
-  __typename?: "Query";
-  schema: {
-    __typename?: "Schema";
-    url?: string | null;
-    tags: Array<{ __typename?: "SchemaTag"; name: string }>;
-  };
-};
-
-export type GetOperationsQueryVariables = Exact<{
+export type GetSidebarOperationsQueryVariables = Exact<{
   input: Scalars["JSON"]["input"];
   type: SchemaType;
-  tag?: InputMaybe<Scalars["String"]["input"]>;
 }>;
 
-export type GetOperationsQuery = {
+export type GetSidebarOperationsQuery = {
   __typename?: "Query";
   schema: {
     __typename?: "Schema";
-    operations: Array<{
-      __typename?: "OperationItem";
-      slug: string;
-      deprecated?: boolean | null;
-      method: string;
-      summary?: string | null;
-      operationId?: string | null;
-      path: string;
-      tags?: Array<{ __typename?: "TagItem"; name: string }> | null;
-    }>;
-    untagged: Array<{
-      __typename?: "OperationItem";
-      slug: string;
-      deprecated?: boolean | null;
-      method: string;
-      summary?: string | null;
-      operationId?: string | null;
-      path: string;
+    tags: Array<{
+      __typename?: "SchemaTag";
+      slug?: string | null;
+      name?: string | null;
+      extensions?: any | null;
+      operations: Array<{
+        __typename?: "OperationItem";
+        summary?: string | null;
+        slug: string;
+        method: string;
+        operationId?: string | null;
+        path: string;
+      }>;
     }>;
   };
 };
@@ -455,8 +447,18 @@ export const ServersQueryDocument = new TypedDocumentString(`
   ServersQueryQuery,
   ServersQueryQueryVariables
 >;
-export const AllOperationsDocument = new TypedDocumentString(`
-    query AllOperations($input: JSON!, $type: SchemaType!, $tag: String, $untagged: Boolean) {
+export const SchemaWarmupDocument = new TypedDocumentString(`
+    query SchemaWarmup($input: JSON!, $type: SchemaType!) {
+  schema(input: $input, type: $type) {
+    openapi
+  }
+}
+    `) as unknown as TypedDocumentString<
+  SchemaWarmupQuery,
+  SchemaWarmupQueryVariables
+>;
+export const OperationsForTagDocument = new TypedDocumentString(`
+    query OperationsForTag($input: JSON!, $type: SchemaType!, $tag: String, $untagged: Boolean) {
   schema(input: $input, type: $type) {
     servers {
       url
@@ -540,8 +542,8 @@ export const AllOperationsDocument = new TypedDocumentString(`
     }
   }
 }`) as unknown as TypedDocumentString<
-  AllOperationsQuery,
-  AllOperationsQueryVariables
+  OperationsForTagQuery,
+  OperationsForTagQueryVariables
 >;
 export const GetServerQueryDocument = new TypedDocumentString(`
     query getServerQuery($input: JSON!, $type: SchemaType!) {
@@ -556,44 +558,24 @@ export const GetServerQueryDocument = new TypedDocumentString(`
   GetServerQueryQuery,
   GetServerQueryQueryVariables
 >;
-export const GetCategoriesDocument = new TypedDocumentString(`
-    query GetCategories($input: JSON!, $type: SchemaType!) {
+export const GetSidebarOperationsDocument = new TypedDocumentString(`
+    query GetSidebarOperations($input: JSON!, $type: SchemaType!) {
   schema(input: $input, type: $type) {
-    url
     tags {
-      name
-    }
-  }
-}
-    `) as unknown as TypedDocumentString<
-  GetCategoriesQuery,
-  GetCategoriesQueryVariables
->;
-export const GetOperationsDocument = new TypedDocumentString(`
-    query GetOperations($input: JSON!, $type: SchemaType!, $tag: String) {
-  schema(input: $input, type: $type) {
-    operations(tag: $tag) {
       slug
-      deprecated
-      method
-      summary
-      operationId
-      path
-      tags {
-        name
+      name
+      extensions
+      operations {
+        summary
+        slug
+        method
+        operationId
+        path
       }
     }
-    untagged: operations(untagged: true) {
-      slug
-      deprecated
-      method
-      summary
-      operationId
-      path
-    }
   }
 }
     `) as unknown as TypedDocumentString<
-  GetOperationsQuery,
-  GetOperationsQueryVariables
+  GetSidebarOperationsQuery,
+  GetSidebarOperationsQueryVariables
 >;

package/src/lib/plugins/openapi/index.tsx

@@ -1,14 +1,12 @@
-import type { ResultOf } from "@graphql-typed-document-node/core";
-import slugify from "@sindresorhus/slugify";
 import { CirclePlayIcon, LogInIcon } from "lucide-react";
 import { type ReactNode } from "react";
 import { matchPath } from "react-router";
 import { useAuth } from "../../authentication/hook.js";
 import { type ZudokuPlugin } from "../../core/plugins.js";
-import type { SchemaImports } from "../../oas/graphql/index.js";
 import { Button } from "../../ui/Button.js";
 import { joinUrl } from "../../util/joinUrl.js";
 import { GraphQLClient } from "./client/GraphQLClient.js";
+import type { GetSidebarOperationsQuery } from "./graphql/graphql.js";
 import { graphql } from "./graphql/index.js";
 import { type OasPluginConfig } from "./interfaces.js";
 import type { PlaygroundContentProps } from "./playground/Playground.js";
@@ -16,54 +14,33 @@ import { PlaygroundDialog } from "./playground/PlaygroundDialog.js";
 import { createSidebarCategory } from "./util/createSidebarCategory.js";
 import { getRoutes, getVersions } from "./util/getRoutes.js";
 
-const GetCategoriesQuery = graphql(`
-  query GetCategories($input: JSON!, $type: SchemaType!) {
+const GetSidebarOperationsQuery = graphql(`
+  query GetSidebarOperations($input: JSON!, $type: SchemaType!) {
     schema(input: $input, type: $type) {
-      url
       tags {
-        name
-      }
-    }
-  }
-`);
-
-const GetOperationsQuery = graphql(`
-  query GetOperations($input: JSON!, $type: SchemaType!, $tag: String) {
-    schema(input: $input, type: $type) {
-      operations(tag: $tag) {
         slug
-        deprecated
-        method
-        summary
-        operationId
-        path
-        tags {
-          name
+        name
+        extensions
+        operations {
+          summary
+          slug
+          method
+          operationId
+          path
         }
       }
-      untagged: operations(untagged: true) {
-        slug
-        deprecated
-        method
-        summary
-        operationId
-        path
-      }
     }
   }
 `);
 
-export type OperationResult = ResultOf<
-  typeof GetOperationsQuery
->["schema"]["operations"][number];
-
-type InternalOasPluginConfig = { schemaImports?: SchemaImports };
+export type OperationResult =
+  GetSidebarOperationsQuery["schema"]["tags"][number]["operations"][number];
 
-export type OpenApiPluginOptions = OasPluginConfig & InternalOasPluginConfig;
+export type OpenApiPluginOptions = OasPluginConfig;
 
 export const UNTAGGED_PATH = "~endpoints";
 
-export const openApiPlugin = (config: OpenApiPluginOptions): ZudokuPlugin => {
+export const openApiPlugin = (config: OasPluginConfig): ZudokuPlugin => {
   const basePath = joinUrl(config.navigationId ?? "/reference");
   const client = new GraphQLClient(config);
 
@@ -134,7 +111,7 @@ export const openApiPlugin = (config: OpenApiPluginOptions): ZudokuPlugin => {
         );
       },
     }),
-    getSidebar: async (path: string) => {
+    getSidebar: async (path, context) => {
       if (!matchPath({ path: basePath, end: false }, path)) {
         return [];
       }
@@ -147,67 +124,46 @@ export const openApiPlugin = (config: OpenApiPluginOptions): ZudokuPlugin => {
       try {
         const versionParam = match?.params.version;
         const version = versionParam ?? getVersions(config).at(0);
-        const { type, options } = config;
+        const { type } = config;
         const input = type === "file" ? config.input[version!] : config.input;
 
-        const collapsible = options?.loadTags === true || config.type === "url";
-        const collapsed = !options?.loadTags && config.type !== "url";
-
-        // find  tag name by slug in config.tagPages
-        const tagName = config.tagPages?.find(
-          (tag) => slugify(tag) === match?.params.tag,
-        );
+        const data = await context.queryClient.ensureQueryData({
+          queryKey: ["sidebar-operations-query", input],
+          queryFn: () =>
+            client.fetch(GetSidebarOperationsQuery, { type, input }),
+        });
 
-        const [tagData, operationsData] = await Promise.all([
-          client.fetch(GetCategoriesQuery, { type, input }),
-          client.fetch(GetOperationsQuery, {
-            type,
-            input,
-            tag: !options?.loadTags ? tagName : undefined,
-          }),
-        ]);
-
-        const categories = tagData.schema.tags.flatMap((tag) => {
-          const categoryPath = joinUrl(
-            basePath,
-            versionParam,
-            slugify(tag.name),
-          );
+        const categories = data.schema.tags.flatMap((tag) => {
+          if (!tag.name || tag.operations.length === 0) return [];
 
-          const operations = operationsData.schema.operations.filter(
-            (operation) =>
-              operation.tags?.length !== 0 &&
-              operation.tags?.map((t) => t.name).includes(tag.name),
-          );
+          const categoryPath = joinUrl(basePath, versionParam, tag.slug);
 
-          // skip empty categories
-          if (options?.loadTags && operations.length === 0) {
-            return [];
-          }
+          const isCollapsed =
+            tag.extensions?.["x-zudoku-collapsed"] ??
+            !config.options?.expandAllTags;
+          const isCollapsible =
+            tag.extensions?.["x-zudoku-collapsible"] ?? true;
 
           return createSidebarCategory({
             label: tag.name,
             path: categoryPath,
-            operations:
-              match?.params.tag !== UNTAGGED_PATH || options?.loadTags
-                ? operations
-                : [],
-            collapsible,
-            collapsed,
+            operations: tag.operations,
+            collapsed: isCollapsed,
+            collapsible: isCollapsible,
           });
         });
 
-        if (operationsData.schema.untagged.length > 0) {
+        const untaggedOperations = data.schema.tags.find(
+          (tag) => !tag.name,
+        )?.operations;
+
+        if (untaggedOperations) {
           categories.push(
             createSidebarCategory({
               label: "Other endpoints",
               path: joinUrl(basePath, versionParam, UNTAGGED_PATH),
-              operations:
-                match?.params.tag === UNTAGGED_PATH || options?.loadTags
-                  ? operationsData.schema.untagged
-                  : [],
-              collapsible,
-              collapsed,
+              operations: untaggedOperations,
+              collapsed: !config.options?.expandAllTags,
             }),
           );
         }

package/src/lib/plugins/openapi/interfaces.ts

@@ -1,3 +1,5 @@
+import type { SchemaImports } from "../../oas/graphql/index.js";
+
 type DynamicInput = () => Promise<unknown>;
 
 type OasSource =
@@ -15,11 +17,12 @@ type BaseOasConfig = {
   navigationId?: string;
   skipPreload?: boolean;
   tagPages?: Array<string>;
+  schemaImports?: SchemaImports;
   options?: {
     examplesLanguage?: string;
     disablePlayground?: boolean;
-    loadTags?: boolean;
     showVersionSelect?: "always" | "if-available" | "hide";
+    expandAllTags?: boolean;
   };
 };
 

package/src/lib/plugins/openapi/util/createSidebarCategory.tsx

@@ -28,12 +28,10 @@ export const createSidebarCategory = ({
     type: "link" as const,
     label: operation.summary ?? operation.path,
     href: `${path}#${operation.slug}`,
-    ...(operation.method && {
-      badge: {
-        label: operation.method,
-        color: MethodColorMap[operation.method.toLowerCase()]!,
-        invert: true,
-      } as const,
-    }),
+    badge: {
+      label: operation.method,
+      color: MethodColorMap[operation.method.toLowerCase()]!,
+      invert: true,
+    },
   })),
 });

package/src/lib/util/traverse.ts

@@ -20,11 +20,11 @@ export const traverse = <T extends JsonValue = RecordAny>(
   for (const [key, value] of Object.entries(transformed)) {
     if (Array.isArray(value)) {
       result[key] = value.map((item) =>
-        typeof item === "object" && item !== null
+        typeof item === "object" && item != null
           ? traverse(item, transform)
           : item,
       );
-    } else if (typeof value === "object" && value !== null) {
+    } else if (typeof value === "object" && value != null) {
       result[key] = traverse(value, transform);
     } else {
       result[key] = value;