kubb-labs / kubb

The ultimate toolkit for working with APIs.
https://kubb.dev
MIT License
670 stars 54 forks source link

Issue with Incorrect Imported Names in Generated Hooks #1031

Closed xalidmalik closed 3 months ago

xalidmalik commented 3 months ago

What version of kubb is running?

2.19.5

What platform is your computer?

MacOS

What version of external packages are you using(@tanstack-query, MSW, React, Vue, ...)

"@kubb/plugin-oas": "^2.19.5", "@kubb/swagger-client": "2.19.5", "@kubb/swagger-tanstack-query": "^2.19.5", "@kubb/swagger-ts": "^2.19.5",

What steps can reproduce the bug?

  1. I set up the configuration with pluginTs and pluginTanstackQuery to create hooks and models based on an OpenAPI schema.
  2. I am using the following Kubb configuration::
import { defineConfig } from '@kubb/core'
import { pluginOas } from '@kubb/plugin-oas'
import { pluginTanstackQuery } from '@kubb/swagger-tanstack-query'
import { pluginTs } from '@kubb/swagger-ts'

const hookNameMappings = {
  useHealthcheckHealthcheckGet: 'useGetHealthcheck',
  // others...
} as Record<string, string>

const transformName = (name: string): string =>
  Object.entries(hookNameMappings).reduce((acc, [hook, mappedHook]) => {
    const baseTypeName = hook.replace(/^use/, '')
    const mappedBaseTypeName = mappedHook.replace(/^use/, '')

    return acc.includes(baseTypeName) ? acc.replace(baseTypeName, mappedBaseTypeName) : acc
  }, name)

export default defineConfig({
  root: '.',
  input: {
    path: 'endpoint',
  },
  output: {
    path: './src/services/__generated__',
    clean: true,
  },
  hooks: {
    done: ['pnpm generate:lint', 'pnpm generate:format'],
  },
  plugins: [
    pluginOas({ output: false }),
    pluginTs({
      output: {
        path: 'models',
        exportType: 'barrel',
      },
      exclude: [
        {
          type: 'tag',
          pattern: /Admin/,
        },
        {
          type: 'path',
          pattern: /admin/i,
        },
      ],
      transformers: {
        name: transformName,
      },
    }),
    pluginTanstackQuery({
      transformers: {
        name: transformName,
      },
      exclude: [
        {
          type: 'tag',
          pattern: /Admin/,
        },
        {
          type: 'path',
          pattern: /admin/i,
        },
      ],
      client: {
        importPath: '@/services/client',
      },
      output: {
        path: './hooks',
      },
      framework: 'react',
      infinite: {},
    }),
  ],
})
  1. I successfully create hooks and models using the configuration
  2. The import paths of the models for Hooks are correct but the naming is wrong
    
    //hooks/useGetHealtcheck.ts
    import client from '@/services/client'
    import type {
    InfiniteData,
    InfiniteQueryObserverOptions,
    QueryKey,
    QueryObserverOptions,
    UseInfiniteQueryResult,
    UseQueryResult,
    UseSuspenseQueryOptions,
    UseSuspenseQueryResult,
    } from '@tanstack/react-query'
    import { infiniteQueryOptions, queryOptions, useInfiniteQuery, useQuery, useSuspenseQuery } from '@tanstack/react-query'
    import type { HealthcheckHealthcheckGetQueryResponse } from '../models/GetHealthcheck'
    //HealthcheckHealthcheckGetQueryResponse should be => GetHealthcheckQueryResponse

```ts
//models/GetHealtcheck.ts
/**
 * @description Successful Response
 */
export type GetHealthcheck200 = any
/**
 * @description Successful Response
 */
export type GetHealthcheckQueryResponse = any
export type GetHealthcheckQuery = {
  Response: GetHealthcheckQueryResponse
}

How often does this bug happen?

Every time

What is the expected behavior?

The expected behavior is that the imported names in the generated hooks should match the names in the generated models.

Swagger/OpenAPI file?

Unfortunately this is not possible :(

Additional information

Thank you for creating such an awesome tool! It has significantly streamlined our development process. The transformation functions for hook and model names are implemented, but the generated import names do not match, leading to import errors in the generated hooks. We appreciate your hard work and look forward to any improvements you can provide.

codelonesomest commented 3 months ago

I'm experiencing the same issues as well.

xalidmalik commented 3 months ago

I'm experiencing the same issues as well.

I think the problem is in PluginTs, because when I make the same setting for PluginZod it works fine

codelonesomest commented 3 months ago

I think the problem is in PluginTs, because when I make the same setting for PluginZod it works fine

I also tried using pluginTs with pluginClient, and encountered the same issue with pluginClient as well. Therefore, it seems pluginTs is currently having issues with transformers.