chore: fix key

packages/react/src/components/Editor.tsx

@@ -12,6 +12,7 @@ export type EditorContextProps = {
 const EditorContext = createContext<EditorContextProps>({ language: 'text' })
 
 type Props = {
+  key?: React.Key
   /**
    * Name of the language used.
    * @default 'text'
@@ -30,9 +31,9 @@ export function TypeScript({ children }: Omit<Props, 'language'>): KubbNode {
   return children
 }
 
-export function Editor({ language = 'text', children }: Props): KubbNode {
+export function Editor({ key, language = 'text', children }: Props): KubbNode {
   return (
-    <kubb-editor language={language}>
+    <kubb-editor key={key} language={language}>
       <EditorContext.Provider value={{ language }}>
         {children}
       </EditorContext.Provider>

packages/react/src/components/Export.tsx

@@ -2,13 +2,14 @@ import type { KubbFile } from '@kubb/core'
 import type { KubbNode } from '../types.ts'
 
 type Props = KubbFile.Export & {
+  key?: React.Key
   /**
    * When true, it will return the generated import.
    * When false, it will add the import to a KubbFile instance(see fileManager)
    */
   print?: boolean
 }
 
-export function Export({ name, path, isTypeOnly, asAlias, print }: Props): KubbNode {
-  return <kubb-export name={name} path={path} isTypeOnly={isTypeOnly} asAlias={asAlias} print={print} />
+export function Export({ key, name, path, isTypeOnly, asAlias, print }: Props): KubbNode {
+  return <kubb-export key={key} name={name} path={path} isTypeOnly={isTypeOnly} asAlias={asAlias} print={print} />
 }

packages/react/src/components/File.tsx

@@ -5,6 +5,7 @@ import type { KubbFile } from '@kubb/core'
 import type { KubbNode } from '../types.ts'
 
 type BasePropsWithBaseName = {
+  key?: React.Key
   /**
    * Name to be used to dynamicly create the baseName(based on input.path).
    * Based on UNIX basename
@@ -18,6 +19,7 @@ type BasePropsWithBaseName = {
 }
 
 type BasePropsWithoutBaseName = {
+  key?: React.Key
   baseName?: never
   /**
    * Path will be full qualified path to a specified file.
@@ -72,16 +74,17 @@ type FileSourceUnionProps = {
 }
 
 type FileSourceProps = FileSourceUnionProps & {
+  key?: React.Key
   /**
    * When true, it will return the generated import.
    * When false, it will add the import to a KubbFile instance(see fileManager).
    */
   print?: boolean
 }
 
-function FileSource({ path, print, children }: FileSourceProps): KubbNode {
+function FileSource({ key, path, print, children }: FileSourceProps): KubbNode {
   return (
-    <kubb-source path={path} print={print}>
+    <kubb-source key={key} path={path} print={print}>
       {children}
     </kubb-source>
   )

packages/react/src/components/Import.tsx

@@ -2,13 +2,14 @@ import type { KubbFile } from '@kubb/core'
 import type { KubbNode } from '../types.ts'
 
 type Props = KubbFile.Import & {
+  key?: React.Key
   /**
    * When true, it will return the generated import.
    * When false, it will add the import to a KubbFile instance(see fileManager).
    */
   print?: boolean
 }
 
-export function Import({ name, root, path, isTypeOnly, isNameSpace, print }: Props): KubbNode {
-  return <kubb-import name={name} root={root} path={path} isNameSpace={isNameSpace} isTypeOnly={isTypeOnly} print={print} />
+export function Import({ key, name, root, path, isTypeOnly, isNameSpace, print }: Props): KubbNode {
+  return <kubb-import key={key} name={name} root={root} path={path} isNameSpace={isNameSpace} isTypeOnly={isTypeOnly} print={print} />
 }

packages/react/src/jsx-runtime.ts

@@ -40,10 +40,12 @@ declare global {
       }
 
       'kubb-import': KubbFile.Import & {
+        key?: Key
         print?: boolean
       }
 
       'kubb-export': KubbFile.Export & {
+        key?: Key
         print?: boolean
       }
 

packages/react/src/types.ts

@@ -35,10 +35,12 @@ declare global {
       }
 
       'kubb-import': KubbFile.Import & {
+        key?: Key
         print?: boolean
       }
 
       'kubb-export': KubbFile.Export & {
+        key?: Key
         print?: boolean
       }
 

packages/swagger-tanstack-query/mocks/petStore.yaml

@@ -8,7 +8,7 @@ info:
     That way, with time, we can improve the API in general, and expose some of the new features in OAS3.
 
     Some useful links:
-    - [The Pet Store repository](https://github.com/swagger-api/swagger-petstore)
+    - [The Pet Store repository](httppetss://github.com/swagger-api/swagger-petstore)
     - [The source API definition for the Pet Store](https://github.com/swagger-api/swagger-petstore/blob/master/src/main/resources/openapi.yaml)
 
   termsOfService: http://swagger.io/terms/

packages/swagger-tanstack-query/src/OperationGenerator.test.tsx

@@ -52,7 +52,7 @@ describe('OperationGenerator', async () => {
         override: undefined,
       },
     )
-    const operation = oas.operation('/pets/{uuid}', 'get')
+    const operation = oas.operation('/pet/{petId}', 'get')
     const files = await og.get(operation, options) as KubbFile.File[]
 
     files.forEach(file => {
@@ -92,7 +92,7 @@ describe('OperationGenerator', async () => {
         override: undefined,
       },
     )
-    const operation = oas.operation('/pets/{pet_id}', 'get')
+    const operation = oas.operation('/pet/{petId}', 'get')
     const files = await og.get(operation, options) as KubbFile.File[]
 
     files.forEach(file => {
@@ -135,7 +135,7 @@ describe('OperationGenerator', async () => {
         override: undefined,
       },
     )
-    const operation = oas.operation('/pets', 'post')
+    const operation = oas.operation('/pet', 'post')
     const files = await og.post(operation, options) as KubbFile.File[]
 
     files.forEach(file => {

packages/swagger-tanstack-query/src/__snapshots__/OperationGenerator.test.tsx.snap

@@ -57,63 +57,172 @@ export function deletePet(options: {
 exports[`OperationGenerator > [GET] should generate with pathParamsType \`inline\` 1`] = `
 "import client from "@kubb/swagger-client/client";
 import { useQuery } from "@tanstack/react-query";
-import type { GetPetsUuidQueryResponse } from "./";
+import type { GetPetByIdQueryResponse, GetPetByIdPathParams, GetPetById400, GetPetById404 } from "./";
 import type { UseBaseQueryOptions, UseQueryResult, QueryKey, WithRequired } from "@tanstack/react-query";
 
- type GetPetsUuidClient = typeof client<GetPetsUuidQueryResponse, never, never>;
-type GetPetsUuid = {
-    data: GetPetsUuidQueryResponse;
-    error: never;
+ type GetPetByIdClient = typeof client<GetPetByIdQueryResponse, GetPetById400 | GetPetById404, never>;
+type GetPetById = {
+    data: GetPetByIdQueryResponse;
+    error: GetPetById400 | GetPetById404;
     request: never;
-    pathParams: never;
+    pathParams: GetPetByIdPathParams;
     queryParams: never;
     headerParams: never;
-    response: GetPetsUuidQueryResponse;
+    response: GetPetByIdQueryResponse;
     client: {
-        parameters: Partial<Parameters<GetPetsUuidClient>[0]>;
-        return: Awaited<ReturnType<GetPetsUuidClient>>;
+        parameters: Partial<Parameters<GetPetByIdClient>[0]>;
+        return: Awaited<ReturnType<GetPetByIdClient>>;
     };
 };
-export const GetPetsUuidQueryKey = () => [{ url: "/pets/:uuid", params: { uuid: uuid } }] as const;
-export type GetPetsUuidQueryKey = ReturnType<typeof GetPetsUuidQueryKey>;
-export function GetPetsUuidQueryOptions<TData = GetPetsUuid["response"], TQueryData = GetPetsUuid["response"]>(options: GetPetsUuid["client"]["parameters"] = {}): WithRequired<UseBaseQueryOptions<GetPetsUuid["response"], GetPetsUuid["error"], TData, TQueryData>, "queryKey"> {
-    const queryKey = GetPetsUuidQueryKey();
+export const GetPetByIdQueryKey = (petId: GetPetByIdPathParams["petId"]) => [{ url: "/pet/:petId", params: { petId: petId } }] as const;
+export type GetPetByIdQueryKey = ReturnType<typeof GetPetByIdQueryKey>;
+export function GetPetByIdQueryOptions<TData = GetPetById["response"], TQueryData = GetPetById["response"]>(petId: GetPetByIdPathParams["petId"], options: GetPetById["client"]["parameters"] = {}): WithRequired<UseBaseQueryOptions<GetPetById["response"], GetPetById["error"], TData, TQueryData>, "queryKey"> {
+    const queryKey = GetPetByIdQueryKey(petId);
     return {
         queryKey,
         queryFn: async () => {
-            const res = await client<GetPetsUuid["data"], GetPetsUuid["error"]>({
+            const res = await client<GetPetById["data"], GetPetById["error"]>({
                 method: "get",
-                url: \`/pets/\${uuid}\`,
+                url: \`/pet/\${petId}\`,
                 ...options
             });
             return res.data;
         },
     };
 }
 /**
-     * @link /pets/:uuid */
-export function get_pets() { }
--uuid < TData;
-GetPetsUuid["response"], TQueryData = GetPetsUuid["response"], TQueryKey;
-QueryKey = GetPetsUuidQueryKey > (options);
-{
-    query ?  : Partial<UseBaseQueryOptions<GetPetsUuid["response"], GetPetsUuid["error"], TData, TQueryData, TQueryKey>>,
-        client ?  : GetPetsUuid["client"]["parameters"];
+     * @description Returns a single pet
+     * @summary Find pet by ID
+     * @link /pet/:petId */
+export function getPetById<TData = GetPetById["response"], TQueryData = GetPetById["response"], TQueryKey extends QueryKey = GetPetByIdQueryKey>(petId: GetPetByIdPathParams["petId"], options: {
+    query?: Partial<UseBaseQueryOptions<GetPetById["response"], GetPetById["error"], TData, TQueryData, TQueryKey>>;
+    client?: GetPetById["client"]["parameters"];
+} = {}): UseQueryResult<TData, GetPetById["error"]> & {
+    queryKey: TQueryKey;
+} {
+    const { query: queryOptions, client: clientOptions = {} } = options ?? {};
+    const queryKey = queryOptions?.queryKey ?? GetPetByIdQueryKey(petId);
+    const query = useQuery<GetPetById["data"], GetPetById["error"], TData, any>({
+        ...GetPetByIdQueryOptions<TData, TQueryData>(petId, clientOptions),
+        queryKey,
+        ...queryOptions
+    }) as UseQueryResult<TData, GetPetById["error"]> & {
+        queryKey: TQueryKey;
+    };
+    query.queryKey = queryKey as TQueryKey;
+    return query;
 }
-{ }
-UseQueryResult<TData, GetPetsUuid["error"]> & { queryKey: TQueryKey };
-{
+"
+`;
+
+exports[`OperationGenerator > [GET] should generate with pathParamsType \`object\` 1`] = `
+"import client from "@kubb/swagger-client/client";
+import { useQuery } from "@tanstack/react-query";
+import type { GetPetByIdQueryResponse, GetPetByIdPathParams, GetPetById400, GetPetById404 } from "./";
+import type { UseBaseQueryOptions, UseQueryResult, QueryKey, WithRequired } from "@tanstack/react-query";
+
+ type GetPetByIdClient = typeof client<GetPetByIdQueryResponse, GetPetById400 | GetPetById404, never>;
+type GetPetById = {
+    data: GetPetByIdQueryResponse;
+    error: GetPetById400 | GetPetById404;
+    request: never;
+    pathParams: GetPetByIdPathParams;
+    queryParams: never;
+    headerParams: never;
+    response: GetPetByIdQueryResponse;
+    client: {
+        parameters: Partial<Parameters<GetPetByIdClient>[0]>;
+        return: Awaited<ReturnType<GetPetByIdClient>>;
+    };
+};
+export const GetPetByIdQueryKey = ({ petId }: GetPetByIdPathParams) => [{ url: "/pet/:petId", params: { petId: petId } }] as const;
+export type GetPetByIdQueryKey = ReturnType<typeof GetPetByIdQueryKey>;
+export function GetPetByIdQueryOptions<TData = GetPetById["response"], TQueryData = GetPetById["response"]>({ petId }: GetPetByIdPathParams, options: GetPetById["client"]["parameters"] = {}): WithRequired<UseBaseQueryOptions<GetPetById["response"], GetPetById["error"], TData, TQueryData>, "queryKey"> {
+    const queryKey = GetPetByIdQueryKey(petId);
+    return {
+        queryKey,
+        queryFn: async () => {
+            const res = await client<GetPetById["data"], GetPetById["error"]>({
+                method: "get",
+                url: \`/pet/\${petId}\`,
+                ...options
+            });
+            return res.data;
+        },
+    };
+}
+/**
+     * @description Returns a single pet
+     * @summary Find pet by ID
+     * @link /pet/:petId */
+export function getPetById<TData = GetPetById["response"], TQueryData = GetPetById["response"], TQueryKey extends QueryKey = GetPetByIdQueryKey>({ petId }: GetPetByIdPathParams, options: {
+    query?: Partial<UseBaseQueryOptions<GetPetById["response"], GetPetById["error"], TData, TQueryData, TQueryKey>>;
+    client?: GetPetById["client"]["parameters"];
+} = {}): UseQueryResult<TData, GetPetById["error"]> & {
+    queryKey: TQueryKey;
+} {
     const { query: queryOptions, client: clientOptions = {} } = options ?? {};
-    const queryKey = queryOptions?.queryKey ?? GetPetsUuidQueryKey();
-    const query = useQuery<GetPetsUuid["data"], GetPetsUuid["error"], TData, any>({
-        ...GetPetsUuidQueryOptions<TData, TQueryData>(clientOptions),
+    const queryKey = queryOptions?.queryKey ?? GetPetByIdQueryKey(petId);
+    const query = useQuery<GetPetById["data"], GetPetById["error"], TData, any>({
+        ...GetPetByIdQueryOptions<TData, TQueryData>({ petId }, GetPetByIdPathParams, clientOptions),
         queryKey,
         ...queryOptions
-    }) as UseQueryResult<TData, GetPetsUuid["error"]> & {
+    }) as UseQueryResult<TData, GetPetById["error"]> & {
         queryKey: TQueryKey;
     };
     query.queryKey = queryKey as TQueryKey;
     return query;
 }
 "
 `;
+
+exports[`OperationGenerator > [POST] should generate with variablesType \`mutate\` 1`] = `
+"import client from "@kubb/swagger-client/client";
+import { useMutation } from "@tanstack/react-query";
+import type { AddPetMutationRequest, AddPetMutationResponse, AddPet405 } from "./";
+import type { UseMutationOptions, UseMutationResult } from "@tanstack/react-query";
+
+ type AddPetClient = typeof client<AddPetMutationResponse, AddPet405, AddPetMutationRequest>;
+type AddPet = {
+    data: AddPetMutationResponse;
+    error: AddPet405;
+    request: AddPetMutationRequest;
+    pathParams: never;
+    queryParams: never;
+    headerParams: never;
+    response: AddPetMutationResponse;
+    client: {
+        parameters: Partial<Parameters<AddPetClient>[0]>;
+        return: Awaited<ReturnType<AddPetClient>>;
+    };
+};
+/**
+     * @description Add a new pet to the store
+     * @summary Add a new pet to the store
+     * @link /pet */
+export function addPet(options: {
+    mutation?: UseMutationOptions<AddPet["response"], AddPet["error"], {
+        data: AddPet["request"];
+    }>;
+    client?: AddPet["client"]["parameters"];
+} = {}): UseMutationResult<AddPet["response"], AddPet["error"], {
+    data: AddPet["request"];
+}> {
+    const { mutation: mutationOptions, client: clientOptions = {} } = options ?? {};
+    return useMutation<AddPet["response"], AddPet["error"], {
+        data: AddPet["request"];
+    }>({
+        mutationFn: async ({ data }) => {
+            const res = await client<AddPet["data"], AddPet["error"], AddPet["request"]>({
+                method: "post",
+                url: \`/pet\`,
+                data,
+                ...clientOptions
+            });
+            return res.data;
+        },
+        ...mutationOptions
+    });
+}
+"
+`;