zudoku 0.3.0-dev.12 → 0.3.0-dev.121

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

@@ -1,11 +1,13 @@
 import { HTTPSnippet } from "@zudoku/httpsnippet";
-import { Fragment, useMemo } from "react";
+import { Fragment, useMemo, useTransition } from "react";
 import { useSearchParams } from "react-router-dom";
+import { TextColorMap } from "../../components/navigation/SidebarBadge.js";
 import { SyntaxHighlight } from "../../components/SyntaxHighlight.js";
 import type { SchemaObject } from "../../oas/parser/index.js";
 import { cn } from "../../util/cn.js";
 import { ColorizedParam } from "./ColorizedParam.js";
-import { MethodTextColorMap } from "./MethodBadge.js";
+import { useOasConfig } from "./context.js";
+import { graphql } from "./graphql/index.js";
 import type { OperationListItemResult } from "./OperationList.js";
 import { PlaygroundDialogWrapper } from "./PlaygroundDialogWrapper.js";
 import { RequestBodySidecarBox } from "./RequestBodySidecarBox.js";
@@ -13,6 +15,7 @@ import { ResponsesSidecarBox } from "./ResponsesSidecarBox.js";
 import * as SidecarBox from "./SidecarBox.js";
 import { SimpleSelect } from "./SimpleSelect.js";
 import { generateSchemaExample } from "./util/generateSchemaExample.js";
+import { useQuery } from "./util/urql.js";
 
 const getConverted = (snippet: HTTPSnippet, option: string) => {
   let converted;
@@ -58,21 +61,57 @@ const getConverted = (snippet: HTTPSnippet, option: string) => {
   return converted ? converted[0] : "";
 };
 
+export const GetServerQuery = graphql(/* GraphQL */ `
+  query getServerQuery($input: JSON!, $type: SchemaType!) {
+    schema(input: $input, type: $type) {
+      url
+    }
+  }
+`);
+
+const context = { suspense: true };
+
+const methodToColor = {
+  get: TextColorMap.green,
+  post: TextColorMap.blue,
+  put: TextColorMap.yellow,
+  delete: TextColorMap.red,
+  patch: TextColorMap.purple,
+  options: TextColorMap.indigo,
+  head: TextColorMap.gray,
+  trace: TextColorMap.gray,
+};
+
 export const Sidecar = ({
   operation,
+  selectedResponse,
+  onSelectResponse,
 }: {
   operation: OperationListItemResult;
+  selectedResponse?: string;
+  onSelectResponse: (response: string) => void;
 }) => {
+  const oasConfig = useOasConfig();
+  const [result] = useQuery({
+    query: GetServerQuery,
+    variables: oasConfig,
+    context,
+  });
   const methodTextColor =
-    MethodTextColorMap[operation.method as keyof typeof MethodTextColorMap];
+    methodToColor[
+      operation.method.toLocaleLowerCase() as keyof typeof methodToColor
+    ] ?? TextColorMap.gray;
 
   const [searchParams, setSearchParams] = useSearchParams();
+  const [, startTransition] = useTransition();
+
   const selectedLang = searchParams.get("lang") ?? "shell";
 
   const requestBodyContent = operation.requestBody?.content;
 
-  const path = operation.path.split("/").map((part) => (
-    <Fragment key={part}>
+  const path = operation.path.split("/").map((part, i, arr) => (
+    // eslint-disable-next-line react/no-array-index-key
+    <Fragment key={part + i}>
       {part.startsWith("{") && part.endsWith("}") ? (
         <ColorizedParam
           name={part.slice(1, -1)}
@@ -85,7 +124,7 @@ export const Sidecar = ({
       ) : (
         part
       )}
-      /
+      {i < arr.length - 1 ? "/" : null}
       <wbr />
     </Fragment>
   ));
@@ -115,7 +154,7 @@ export const Sidecar = ({
   return (
     <aside className="flex flex-col overflow-hidden sticky top-[--scroll-padding] gap-4">
       <SidecarBox.Root>
-        <SidecarBox.Head className="flex justify-between items-center flex-nowrap p-2 gap-2 text-xs">
+        <SidecarBox.Head className="flex justify-between items-center flex-nowrap py-3 gap-2 text-xs">
           <span className="font-mono break-words">
             <span className={cn("font-semibold", methodTextColor)}>
               {operation.method.toLocaleUpperCase()}
@@ -123,27 +162,10 @@ export const Sidecar = ({
             &nbsp;
             {path}
           </span>
-          <div className="flex gap-2 items-center">
-            <SimpleSelect
-              className="self-start"
-              value={selectedLang}
-              onChange={(e) => setSearchParams({ lang: e.target.value })}
-              options={[
-                { value: "shell", label: "cURL" },
-                { value: "js", label: "Javascript" },
-                { value: "python", label: "Python" },
-                { value: "java", label: "Java" },
-                { value: "go", label: "Go" },
-                { value: "csharp", label: "C#" },
-                { value: "kotlin", label: "Kotlin" },
-                { value: "objc", label: "Objective C" },
-                { value: "php", label: "PHP" },
-                { value: "ruby", label: "Ruby" },
-                { value: "swift", label: "Swift" },
-              ]}
-            />
-            <PlaygroundDialogWrapper operation={operation} />
-          </div>
+          <PlaygroundDialogWrapper
+            server={result.data?.schema.url ?? ""}
+            operation={operation}
+          />
         </SidecarBox.Head>
         <SidecarBox.Body>
           <SyntaxHighlight
@@ -153,12 +175,41 @@ export const Sidecar = ({
             code={code}
           />
         </SidecarBox.Body>
+        <SidecarBox.Footer className="flex items-center text-xs gap-2 justify-end py-1">
+          <span>Show example in</span>
+          <SimpleSelect
+            className="self-start max-w-[150px]"
+            value={selectedLang}
+            onChange={(e) => {
+              startTransition(() => {
+                setSearchParams({ lang: e.target.value });
+              });
+            }}
+            options={[
+              { value: "shell", label: "cURL" },
+              { value: "js", label: "Javascript" },
+              { value: "python", label: "Python" },
+              { value: "java", label: "Java" },
+              { value: "go", label: "Go" },
+              { value: "csharp", label: "C#" },
+              { value: "kotlin", label: "Kotlin" },
+              { value: "objc", label: "Objective C" },
+              { value: "php", label: "PHP" },
+              { value: "ruby", label: "Ruby" },
+              { value: "swift", label: "Swift" },
+            ]}
+          />
+        </SidecarBox.Footer>
       </SidecarBox.Root>
       {requestBodyContent && (
         <RequestBodySidecarBox content={requestBodyContent} />
       )}
       {operation.responses.length > 0 && (
-        <ResponsesSidecarBox responses={operation.responses} />
+        <ResponsesSidecarBox
+          selectedResponse={selectedResponse}
+          onSelectResponse={onSelectResponse}
+          responses={operation.responses}
+        />
       )}
     </aside>
   );

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

@@ -8,7 +8,7 @@ type BaseComponentProps<T = unknown> = PropsWithChildren<
 export const Root = ({ children, className }: BaseComponentProps) => (
   <div
     className={cn(
-      "rounded-lg overflow-hidden border border-border dark:border-transparent",
+      "rounded-lg overflow-hidden border dark:border-transparent",
       className,
     )}
   >
@@ -19,7 +19,7 @@ export const Root = ({ children, className }: BaseComponentProps) => (
 export const Head = ({ children, className }: BaseComponentProps) => (
   <div
     className={cn(
-      "border-b border-b-border dark:border-b-zinc-600 bg-zinc-100 dark:bg-zinc-700 p-2",
+      "border-b dark:border-zinc-600 bg-zinc-100 dark:bg-zinc-700 p-2",
       className,
     )}
   >
@@ -34,3 +34,14 @@ export const Body = ({ children, className }: BaseComponentProps) => (
     {children}
   </div>
 );
+
+export const Footer = ({ children, className }: BaseComponentProps) => (
+  <div
+    className={cn(
+      "border-t dark:border-zinc-600 bg-zinc-100 dark:bg-zinc-700 p-2",
+      className,
+    )}
+  >
+    {children}
+  </div>
+);

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

@@ -1,5 +1,5 @@
+import { ChevronsUpDownIcon } from "lucide-react";
 import type { ChangeEventHandler } from "react";
-import { ChevronsUpDownIcon } from "../../core/icons.js";
 import { cn } from "../../util/cn.js";
 
 export const SimpleSelect = ({

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

@@ -0,0 +1,31 @@
+import {
+  Children,
+  createContext,
+  ReactNode,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
+
+export const StaggeredRenderContext = createContext({ stagger: false });
+
+const StaggeredRender = ({ children }: { children: ReactNode[] }) => {
+  const { stagger } = useContext(StaggeredRenderContext);
+  const [renderAll, setRenderAll] = useState(!stagger);
+
+  useEffect(() => {
+    if (renderAll) {
+      return;
+    }
+
+    const idle = requestIdleCallback(() => {
+      setRenderAll(true);
+    });
+
+    return () => cancelIdleCallback(idle);
+  }, [renderAll]);
+
+  return !renderAll ? Children.toArray(children).slice(0, 3) : children;
+};
+
+export default StaggeredRender;

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

@@ -0,0 +1,56 @@
+/* eslint-disable no-console */
+import {
+  cacheExchange,
+  Client,
+  fetchExchange,
+  mapExchange,
+} from "../util/urql.js";
+import { createServer } from "./createServer.js";
+import { CreateClientFunction } from "./interfaces.js";
+
+export type WorkerGraphQLMessage = { id: string; body: string };
+
+const localServer = createServer();
+
+/**
+ * Creates an in memory Client that does not use Workers. This allows
+ * developers to run the simple standalone version of zudoku using the CDN
+ * hosted scripts. Worker's cannot be loaded cross domain so in this case
+ * we sacrifice performance for making it work cross domain.
+ */
+export const createClient: CreateClientFunction = () => {
+  return new Client({
+    url: "/__z/graphql",
+    // Custom fetch to send the GraphQL request to the worker and convert the response back to a `Response` object
+    fetch: async (req, init) => {
+      if (!init?.body) throw new Error("No body");
+      const response = await localServer.fetch(
+        new Request("http://localhost/__z/graphql", {
+          method: "POST",
+          body: init.body,
+          headers: {
+            "Content-Type": "application/json",
+          },
+        }),
+      );
+      return response;
+      // port.postMessage({
+      //   id: e.data.id,
+      //   body: await response.text(),
+      // } satisfies WorkerGraphQLMessage);
+    },
+    exchanges: [
+      cacheExchange,
+      mapExchange({
+        onError(error, operation) {
+          console.error(error);
+          console.groupCollapsed("Operation info");
+          console.log("body", operation.query.loc?.source.body.trim());
+          console.log("variables", operation.variables);
+          console.groupEnd();
+        },
+      }),
+      fetchExchange,
+    ],
+  });
+};

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

@@ -0,0 +1,33 @@
+import { useLogger } from "@envelop/core";
+import { createGraphQLServer } from "../../../oas/graphql/index.js";
+
+const map = new Map<string, number>();
+
+/**
+ * Creates the GraphQL server
+ */
+export const createServer = () =>
+  createGraphQLServer({
+    plugins: [
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      useLogger({
+        logFn: (eventName, { args }) => {
+          if (import.meta.env.PROD) return;
+
+          if (eventName.endsWith("-start")) {
+            map.set(`${eventName}-${args.operationName}`, performance.now());
+          } else if (eventName.endsWith("-end")) {
+            const startEvent = eventName.replace("-end", "-start");
+            const start = map.get(`${startEvent}-${args.operationName}`);
+            if (start) {
+              // eslint-disable-next-line no-console
+              console.log(
+                `${args.operationName} query took ${performance.now() - start}ms`,
+              );
+              map.delete(`${startEvent}-${args.operationName}`);
+            }
+          }
+        },
+      }),
+    ],
+  });

package/src/lib/plugins/openapi/{worker/createSharedWorkerClient.ts → client/createWorkerClient.ts}

@@ -7,15 +7,34 @@ import {
   fetchExchange,
   mapExchange,
 } from "../util/urql.js";
+import { createClient as createMemoryClient } from "./createMemoryClient.js";
+import { CreateClientFunction } from "./interfaces.js";
 
 export type WorkerGraphQLMessage = { id: string; body: string };
-
 const ulid = monotonicFactory();
-export const createSharedWorkerClient = () => {
+
+/**
+ * This loads the client from a worker and uses mess port to send requests
+ * and responses between the main thread and the worker.
+ */
+export const createClient: CreateClientFunction = ({
+  useMemoryClient,
+}: {
+  useMemoryClient: boolean;
+}) => {
+  if (useMemoryClient || typeof SharedWorker === "undefined") {
+    return createMemoryClient({ useMemoryClient });
+  }
+  // NOTE: This URL needs to be inline with the SharedWorker otherwse
+  // vite build does not recognize the worker file as a module.
   const worker = new SharedWorker(new URL("./worker.ts", import.meta.url), {
     type: "module",
   });
 
+  worker.onerror = (e) => {
+    console.error(e);
+  };
+
   worker.port.start();
 
   const [waitFor, notify] = createWaitForNotify<string>();

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

@@ -0,0 +1,5 @@
+import { Client } from "urql";
+
+export type CreateClientFunction = (config: {
+  useMemoryClient: boolean;
+}) => Client;

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

@@ -0,0 +1,30 @@
+import { createServer } from "./createServer.js";
+import { type WorkerGraphQLMessage } from "./createWorkerClient.js";
+
+const localServer = createServer();
+
+const worker = self as unknown as SharedWorkerGlobalScope;
+
+worker.addEventListener(
+  "connect",
+  function (event: MessageEvent<{ id: string; body: string }>) {
+    const port = event.ports[0];
+
+    port.onmessage = async function (e) {
+      const response = await localServer.fetch(
+        new Request("/__z/graphql", {
+          method: "POST",
+          body: e.data.body,
+          headers: {
+            "Content-Type": "application/json",
+          },
+        }),
+      );
+
+      port.postMessage({
+        id: e.data.id,
+        body: await response.text(),
+      } satisfies WorkerGraphQLMessage);
+    };
+  },
+);

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

@@ -0,0 +1,16 @@
+import { createContext, useContext } from "react";
+import { OasPluginConfig } from "./interfaces.js";
+
+const OasContext = createContext<{ config: OasPluginConfig } | undefined>(
+  undefined,
+);
+
+export const OasConfigProvider = OasContext.Provider;
+
+export const useOasConfig = () => {
+  const ctx = useContext(OasContext);
+  if (!ctx) {
+    throw new Error("useOasConfig must be used within a OasConfigProvider");
+  }
+  return ctx.config;
+};

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

@@ -13,12 +13,12 @@ import * as types from "./graphql.js";
  * Therefore it is highly recommended to use the babel or swc plugin for production.
  */
 const documents = {
-  "\n  query getServerQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n    }\n  }\n":
-    types.GetServerQueryDocument,
   "\n  fragment OperationsFragment on OperationItem {\n    slug\n    summary\n    method\n    description\n    operationId\n    contentTypes\n    path\n    parameters {\n      name\n      in\n      description\n      required\n      schema\n      style\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        schema\n      }\n      description\n      required\n    }\n    responses {\n      statusCode\n      links\n      description\n      content {\n        mediaType\n        encoding {\n          name\n        }\n        schema\n      }\n    }\n  }\n":
     types.OperationsFragmentFragmentDoc,
   "\n  query AllOperations($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      description\n      title\n      url\n      version\n      tags {\n        name\n        description\n        operations {\n          slug\n          ...OperationsFragment\n        }\n      }\n    }\n  }\n":
     types.AllOperationsDocument,
+  "\n  query getServerQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n    }\n  }\n":
+    types.GetServerQueryDocument,
   "\n  query GetCategories($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      tags {\n        __typename\n        name\n        operations {\n          __typename\n          slug\n          deprecated\n          method\n          summary\n          operationId\n          path\n        }\n      }\n    }\n  }\n":
     types.GetCategoriesDocument,
 };
@@ -37,12 +37,6 @@ const documents = {
  */
 export function graphql(source: string): unknown;
 
-/**
- * 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    }\n  }\n",
-): (typeof documents)["\n  query getServerQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -55,6 +49,12 @@ export function graphql(
 export function graphql(
   source: "\n  query AllOperations($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      description\n      title\n      url\n      version\n      tags {\n        name\n        description\n        operations {\n          slug\n          ...OperationsFragment\n        }\n      }\n    }\n  }\n",
 ): (typeof documents)["\n  query AllOperations($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      description\n      title\n      url\n      version\n      tags {\n        name\n        description\n        operations {\n          slug\n          ...OperationsFragment\n        }\n      }\n    }\n  }\n"];
+/**
+ * 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    }\n  }\n",
+): (typeof documents)["\n  query getServerQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */

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

@@ -57,7 +57,7 @@ export type MediaTypeObject = {
   encoding?: Maybe<Array<EncodingItem>>;
   examples?: Maybe<Array<ExampleItem>>;
   mediaType: Scalars["String"]["output"];
-  schema: Scalars["JSON"]["output"];
+  schema?: Maybe<Scalars["JSON"]["output"]>;
 };
 
 export type OperationItem = {
@@ -163,16 +163,6 @@ export type TagItem = {
   name: Scalars["String"]["output"];
 };
 
-export type GetServerQueryQueryVariables = Exact<{
-  input: Scalars["JSON"]["input"];
-  type: SchemaType;
-}>;
-
-export type GetServerQueryQuery = {
-  __typename?: "Query";
-  schema: { __typename?: "Schema"; url: string };
-};
-
 export type OperationsFragmentFragment = {
   __typename?: "OperationItem";
   slug: string;
@@ -206,7 +196,7 @@ export type OperationsFragmentFragment = {
     content?: Array<{
       __typename?: "MediaTypeObject";
       mediaType: string;
-      schema: any;
+      schema?: any | null;
       encoding?: Array<{ __typename?: "EncodingItem"; name: string }> | null;
     }> | null;
   } | null;
@@ -218,7 +208,7 @@ export type OperationsFragmentFragment = {
     content?: Array<{
       __typename?: "MediaTypeObject";
       mediaType: string;
-      schema: any;
+      schema?: any | null;
       encoding?: Array<{ __typename?: "EncodingItem"; name: string }> | null;
     }> | null;
   }>;
@@ -252,6 +242,16 @@ export type AllOperationsQuery = {
   };
 };
 
+export type GetServerQueryQueryVariables = Exact<{
+  input: Scalars["JSON"]["input"];
+  type: SchemaType;
+}>;
+
+export type GetServerQueryQuery = {
+  __typename?: "Query";
+  schema: { __typename?: "Schema"; url: string };
+};
+
 export type GetCategoriesQueryVariables = Exact<{
   input: Scalars["JSON"]["input"];
   type: SchemaType;
@@ -423,73 +423,6 @@ export const OperationsFragmentFragmentDoc = {
     },
   ],
 } as unknown as DocumentNode<OperationsFragmentFragment, unknown>;
-export const GetServerQueryDocument = {
-  kind: "Document",
-  definitions: [
-    {
-      kind: "OperationDefinition",
-      operation: "query",
-      name: { kind: "Name", value: "getServerQuery" },
-      variableDefinitions: [
-        {
-          kind: "VariableDefinition",
-          variable: {
-            kind: "Variable",
-            name: { kind: "Name", value: "input" },
-          },
-          type: {
-            kind: "NonNullType",
-            type: { kind: "NamedType", name: { kind: "Name", value: "JSON" } },
-          },
-        },
-        {
-          kind: "VariableDefinition",
-          variable: { kind: "Variable", name: { kind: "Name", value: "type" } },
-          type: {
-            kind: "NonNullType",
-            type: {
-              kind: "NamedType",
-              name: { kind: "Name", value: "SchemaType" },
-            },
-          },
-        },
-      ],
-      selectionSet: {
-        kind: "SelectionSet",
-        selections: [
-          {
-            kind: "Field",
-            name: { kind: "Name", value: "schema" },
-            arguments: [
-              {
-                kind: "Argument",
-                name: { kind: "Name", value: "input" },
-                value: {
-                  kind: "Variable",
-                  name: { kind: "Name", value: "input" },
-                },
-              },
-              {
-                kind: "Argument",
-                name: { kind: "Name", value: "type" },
-                value: {
-                  kind: "Variable",
-                  name: { kind: "Name", value: "type" },
-                },
-              },
-            ],
-            selectionSet: {
-              kind: "SelectionSet",
-              selections: [
-                { kind: "Field", name: { kind: "Name", value: "url" } },
-              ],
-            },
-          },
-        ],
-      },
-    },
-  ],
-} as unknown as DocumentNode<GetServerQueryQuery, GetServerQueryQueryVariables>;
 export const AllOperationsDocument = {
   kind: "Document",
   definitions: [
@@ -735,6 +668,73 @@ export const AllOperationsDocument = {
     },
   ],
 } as unknown as DocumentNode<AllOperationsQuery, AllOperationsQueryVariables>;
+export const GetServerQueryDocument = {
+  kind: "Document",
+  definitions: [
+    {
+      kind: "OperationDefinition",
+      operation: "query",
+      name: { kind: "Name", value: "getServerQuery" },
+      variableDefinitions: [
+        {
+          kind: "VariableDefinition",
+          variable: {
+            kind: "Variable",
+            name: { kind: "Name", value: "input" },
+          },
+          type: {
+            kind: "NonNullType",
+            type: { kind: "NamedType", name: { kind: "Name", value: "JSON" } },
+          },
+        },
+        {
+          kind: "VariableDefinition",
+          variable: { kind: "Variable", name: { kind: "Name", value: "type" } },
+          type: {
+            kind: "NonNullType",
+            type: {
+              kind: "NamedType",
+              name: { kind: "Name", value: "SchemaType" },
+            },
+          },
+        },
+      ],
+      selectionSet: {
+        kind: "SelectionSet",
+        selections: [
+          {
+            kind: "Field",
+            name: { kind: "Name", value: "schema" },
+            arguments: [
+              {
+                kind: "Argument",
+                name: { kind: "Name", value: "input" },
+                value: {
+                  kind: "Variable",
+                  name: { kind: "Name", value: "input" },
+                },
+              },
+              {
+                kind: "Argument",
+                name: { kind: "Name", value: "type" },
+                value: {
+                  kind: "Variable",
+                  name: { kind: "Name", value: "type" },
+                },
+              },
+            ],
+            selectionSet: {
+              kind: "SelectionSet",
+              selections: [
+                { kind: "Field", name: { kind: "Name", value: "url" } },
+              ],
+            },
+          },
+        ],
+      },
+    },
+  ],
+} as unknown as DocumentNode<GetServerQueryQuery, GetServerQueryQueryVariables>;
 export const GetCategoriesDocument = {
   kind: "Document",
   definitions: [