Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
th3l0g4n opened this issue Jan 8, 2025 · 2 comments
Open

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

th3l0g4n opened this issue Jan 8, 2025 · 2 comments

Comments

@th3l0g4n
Copy link

th3l0g4n commented Jan 8, 2025

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).

@th3l0g4n th3l0g4n added the enhancement New feature or request label Jan 8, 2025
@stijnvanhulle
Copy link
Collaborator

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

@nimo23
Copy link

nimo23 commented Jan 8, 2025

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants