OpenAPI: Support array type in parameters

.changeset/big-hairs-drive.md

@@ -0,0 +1,5 @@
+---
+'fumadocs-openapi': patch
+---
+
+Support array type in parameters

packages/openapi/src/playground/client.tsx

@@ -29,7 +29,7 @@ import { useApiContext, useServerSelectContext } from '@/ui/contexts/api';
 import type { FetchResult } from '@/playground/fetcher';
 import { FieldSet, JsonInput, ObjectInput } from './inputs';
 import type {
-  PrimitiveRequestField,
+  ParameterField,
   ReferenceSchema,
   RequestSchema,
 } from '@/playground/index';
@@ -89,7 +89,7 @@ export type ClientProps = HTMLAttributes<HTMLFormElement> & {
   authorization?: Security & {
     persistentId: string;
   };
-  parameters?: PrimitiveRequestField[];
+  parameters?: ParameterField[];
   body?: RequestSchema & {
     mediaType: string;
   };
@@ -101,8 +101,8 @@ export type ClientProps = HTMLAttributes<HTMLFormElement> & {
 
   fields?: {
     parameter?: CustomField<
-      `${PrimitiveRequestField['in']}.${string}`,
-      PrimitiveRequestField
+      `${ParameterField['in']}.${string}`,
+      ParameterField
     >;
     auth?: CustomField<'authorization', RequestSchema>;
     body?: CustomField<'body', RequestSchema>;

packages/openapi/src/playground/index.tsx

@@ -12,20 +12,16 @@ import { getSecurities } from '@/utils/get-security';
 import { type ClientProps } from './client';
 import { ClientLazy } from '@/playground/client.lazy';
 
-interface BaseRequestField {
-  name: string;
-  description?: string;
-}
-
 interface BaseSchema {
   description?: string;
   isRequired: boolean;
 }
 
-export type PrimitiveRequestField = BaseRequestField &
-  PrimitiveSchema & {
-    in: 'cookie' | 'header' | 'query' | 'path';
-  };
+export type ParameterField = (PrimitiveSchema | ArraySchema) & {
+  name: string;
+  description?: string;
+  in: 'cookie' | 'header' | 'query' | 'path';
+};
 
 interface PrimitiveSchema extends BaseSchema {
   type: 'boolean' | 'string' | 'number';
@@ -198,7 +194,7 @@ function getIdFromSchema(
 function parameterToField(
   v: NoReference<ParameterObject>,
   ctx: Context,
-): PrimitiveRequestField {
+): ParameterField {
   const allowed = ['header', 'cookie', 'query', 'path'] as const;
 
   if (!allowed.includes(v.in as (typeof allowed)[number]))

packages/openapi/src/playground/inputs.tsx

@@ -482,6 +482,7 @@ function ArrayInput({
 } & HTMLAttributes<HTMLDivElement>) {
   const { references } = useSchemaContext();
   const items = resolve(field.items, references);
+  const name = fieldName.split('.').at(-1) ?? '';
   const { fields, append, remove } = useFieldArray({
     name: fieldName,
   });
@@ -493,7 +494,7 @@ function ArrayInput({
           key={item.id}
           name={
             <span className="text-fd-muted-foreground">
-              {fieldName.split('.').at(-1)}[{index}]
+              {name}[{index}]
             </span>
           }
           field={items}

packages/openapi/src/utils/get-pathname-from-input.ts

@@ -5,22 +5,26 @@ export function getPathnameFromInput(
 ): string {
   let pathname = url;
   for (const key in path) {
-    const paramValue = path[key];
+    if (path[key] === '') continue;
 
-    if (typeof paramValue === 'string' && paramValue.length > 0)
-      pathname = pathname.replace(`{${key}}`, paramValue);
-    else if (typeof paramValue === 'number')
-      pathname = pathname.replace(`{${key}}`, paramValue.toString());
+    if (Array.isArray(path[key])) {
+      pathname = pathname.replace(`{${key}}`, path[key].join('/'));
+    } else {
+      pathname = pathname.replace(`{${key}}`, String(path[key]));
+    }
   }
 
   const searchParams = new URLSearchParams();
   for (const key in query) {
-    const paramValue = query[key];
+    if (query[key] === '') continue;
 
-    if (typeof paramValue === 'string' && paramValue.length > 0)
-      searchParams.append(key, paramValue);
-    else if (typeof paramValue === 'number')
-      searchParams.append(key, paramValue.toString());
+    if (Array.isArray(query[key])) {
+      for (const value of query[key]) {
+        searchParams.append(key, String(value));
+      }
+    } else {
+      searchParams.set(key, String(query[key]));
+    }
   }
 
   return searchParams.size > 0 ? `${pathname}?${searchParams}` : pathname;