@kubb/plugin-vue-query: Export underlying fetch function

[th3l0g4n]

What is the problem this feature would solve?

We are using kubb now to orchestrate the communication with 4 different services.
The generated API Clients and Types from the OpenAPI docs saves A TON of manual written code. So thanks for that great library!

There is currently just a small issue.
The files for the generated API Endpoints currently include the following functions:

• useXY --> the actual tanstack wrapper
• getQueryKeyForXY --> querykey for the wrapper
• getQueryOptionsForXY --> query options for the wrapper
• getXY --> the actual function that performs the request (used in the tanstack wrapper)

The last one is not exported from the file which would be great as we need to perform some prefetching throughout our application to make sure important data is available.
As there is no automatically generated method for prefetching, we could contructs those ourselves with the help of the generated getQueryKeyForXY and getXY methods without creating duplicated "fetch methods".

External documents/projects?

No response

What is the feature you are proposing to solve the problem?

Export the underlying fetch method to make it available in Userland.

What alternatives have you considered?

Write the fetch method including the required url manually (which should not be necessary).

[stijnvanhulle]

You could use the client plugin to generate fetch functions, see https://www.kubb.dev/plugins/plugin-client/

[nimo23]

Even though the user can provide their own fetch functions, I think, exporting the default fetch.ts into the userspace can be a good idea for various reasons:

Currently, kubb generates code (from plugin-client with fetch) like this:

getUserByUsername.ts:

import client from '@kubb/plugin-client/clients/fetch'
import type {
  GetUserByUsernameQueryResponse,
  GetUserByUsernamePathParams,
  GetUserByUsernameQueryParams,
  GetUserByUsername404,
} from '../../../types/RepositoryResource/GetUserByUsername.ts'
import type { RequestConfig, ResponseErrorConfig } from '@kubb/plugin-client/clients/fetch'

..

The fetch.ts (from @kubb/plugin-client/clients/fetch) could be externalized into the folder specfied in pluginClient

pluginClient({
	output: {
	   path: './clients/fetch',
           client: 'fetch',
},

With this, the generated code would look like this:

import client from './clients/fetch/fetch.ts'
import type {
  GetUserByUsernameQueryResponse,
  GetUserByUsernamePathParams,
  GetUserByUsernameQueryParams,
  GetUserByUsername404,
} from '../../../types/RepositoryResource/GetUserByUsername.ts'
import type { RequestConfig, ResponseErrorConfig } from './clients/fetch/fetch.ts'

..

The same approach should also be used for client: 'axios'.

The pluginReactQuery can then also use this userland import-path:

pluginReactQuery({ 
...
    client: {
        // instead of '@kubb/plugin-client/clients/fetch',
        importPath: './clients/fetch/fetch.ts',
        dataReturnType: 'full',
    },
})

It offers at least the following benefits:

• Issues like these are solved
• It is no longer necessary to add kubb-client as a dependency (dev-dep is enough) in package.json.

[th3l0g4n]

@nimo23 the changes you mention might be another another usefull addition but I think it does not cover the issue I described above.

Have a look at the generated content in:
https://github.com/kubb-labs/kubb/blob/main/examples/vue-query/src/gen/hooks/useGetInventory.ts

What I would like to have is, that the getInventory method is also exported from the file so I can use these building blocks to create prefetch functions like:

queryClient.prefetchQuery({
  queryKey: getInventoryQueryKey(),
  staleTime: 10 * 60 * 1000,
  queryFn: () => getInventory(data),
})