nuxt-open-fetch
nuxt-open-fetch copied to clipboard
Impossible to use transform option in hook
Environment
- Operating System: Darwin
- Node Version: v24.9.0
- Nuxt Version: 4.1.2
- CLI Version: 3.28.0
- Nitro Version: 2.12.6
- Package Manager: [email protected]
- Builder: -
- User Config: devtools, typescript, css, compatibilityDate, devServer, vite, runtimeConfig, app, ui, openFetch, scripts, piniaPluginPersistedstate, modules, sentry, sourcemap
- Runtime Modules: @nuxt/[email protected], [email protected], @pinia/[email protected], pinia-plugin-persistedstate/[email protected], @sentry/nuxt/[email protected], @nuxt/[email protected], @nuxt/[email protected], [email protected]
- Build Modules: -
Reproduction
export default defineNuxtPlugin((nuxtApp) => {
const transformer = (obj: any) => {
// ...
};
nuxtApp.hook('openFetch:onRequest', (ctx) => {
ctx.options.transform = (response) => transformer(response);
})
})
Describe the bug
I'm currently migrating from the basic useFetch to your awesome library.
When I try to add a global transformer directly in the hook, I get the error: Property 'transform' does not exist.
However, this option is available in useFetch.
Additional context
In fact, I'm not sure if this is a bug or the intended behavior.
It would be really helpful to have support for a global transformer.
For example, in my case, the backend (Python) uses snake_case (so the OpenAPI schema too), and I’d like to automatically transform the entire response to camelCase on the frontend.
Is this currently possible, or would it make sense to add such a feature?
EDIT: I just saw this section in the openapi-ts docs https://openapi-ts.dev/advanced#embrace-snake-case-in-js.
Maybe I’ll simply switch everything from camelCase to snake_case.
Logs
Property 'transform' does not exist on type 'ResolvedFetchOptions<ResponseType, any>'.ts(2339)
The reason why it doesn't work is that the hooks work on the $fetch which doesn't have a transform option like useFetch.
What you can do instead is hooking into openFetch:onResponse and modify ctx.response._data. This property isn't really well documented by ofetch. I only found it by asking ChatGPT 😆
Oh, okay! Yes, I think that should work, but I might lose the auto-types, right?
That is correct, the types from nuxt-open-fetch would still represent the untransformed keys.
But that would be the case either way, as changing the function signature of $client and $useClient from a hook isn't really possible in TypeScript, as far as I know.
A potential solution for that could be to use transform/postTransform from openapi-ts to transform the types as well.
Yeah maybe it would do the trick, thks for your help !
However I'm not going to bother myself testing it, as I said in my first message (in the edit) I'm going to follow the openapi-ts recommendation and simply switch everything to snake_case it's a bit more work but it will simplify everything in the end 😊
That is, most likely, the wisest solution 😄
Since it's not a good practice to implement this feature. I close this as not planned.
Thks for your help !