nuxt-open-fetch
nuxt-open-fetch copied to clipboard
Nuxt 3.15.1 breaks the module
Environment
- Operating System: Darwin
- Node Version: v20.13.0
- Nuxt Version: 3.15.1
- CLI Version: 3.17.2
- Nitro Version: 2.10.4
- Package Manager: [email protected]
- Builder: -
- User Config: default
- Runtime Modules: @nuxt/[email protected], [email protected], @nuxtjs/[email protected], [email protected], @nuxtjs/[email protected], @nuxtjs/[email protected], @vueuse/[email protected], @sidebase/[email protected], @vesp/[email protected]
- Build Modules: -
Reproduction
N/A
Describe the bug
We upgraded to Nuxt 3.15.1, and since then our useThing composable throw hydration errors when fetching data and we have to rely on a custom useAsyncData implementation, using $thing.
Under the hood, useThing should just be useAsyncData('key', $thing() => {}), correct?
So maybe something changed slightly in Nuxt that breaks this implementation?
We've debugged this a bit, and it turns out that the server-side fetch is correct, but initially the client-side one is null for an instant.
You can see this by using an immediate watcher on the data.
Additional context
No response
Logs
No response
Got the same issue. Wrapping everything in custom useAsyncData helps, but I've got a lot of not wrapped API calls so it is not solution for me.
Noticed that problem can be somehow related to payload.data key generation, cause it API called twice (on SSR and on front-end) with different keys.
It may not be related but I did get a momentary null value here: https://github.com/enkot/nuxt-open-fetch/issues/62.
adding a key works as a workaround:
const { data } = await useApi('/rest', {
key: 'media',
})
For some reasons in useFetch.ts file param autoKey is always undefined now. When adding key as suggested by @woldtwerk this value becomes not undefined. So I'm not sure if it is the problem on nuxt-open-fetch implementation or on NUXT side
For now, since Enkot isn't responsive, I forked the repository (as nuxt-open-fetch-x) and implemented a temporary solution that I currently use in my apps.
@Norbiros I've tried your implementation and it is doesn't work. As I mention the main problem here is that autokey parameter is not generated
And I am automatically generating it by hand. It works here https://github.com/Hack4Krak/Hack4KrakSite/pull/395...
Oh, I see that you did it yesterday. I was testing your version few days ago. Yes, your solution should work for 100%.
But it is interesting why it is not autogenerated on Nuxt side, because this key goes from Nuxt useFetch method, and as I can see nothing was changed there. Maybe @danielroe can help here if possible to find a way where can we dive into
make sure you are updated to nuxt v3.16.1 as we shipped a fix here (underlying issue was different versions of ohash in project)
If I remember correctly I was able to reproduce it in 3.16.1, but I can check it again but in few hours
@danielroe checked it on v3.16.1 and got the same issue
Looping back on this, the types are also still incorrect when trying to pass in the fetch instance to createOpenFetch.
We use const localFetch = useRequestFetch() and pass that in as the instance, but in 3.16.0 the types are no longer compatible (this might be a Nuxt issue?).
@Norbiros, https://github.com/enkot/nuxt-open-fetch/issues/83#issuecomment-2745185319
For now, since Enkot isn't responsive, I forked the repository (as nuxt-open-fetch-x) and implemented a temporary solution that I currently use in my apps.
It works, thanks!!
For now, since Enkot isn't responsive, I forked the repository (as nuxt-open-fetch-x) and implemented a temporary solution that I currently use in my apps.
Thanks for your fix. Unfortunately I still get a double fetch if I use a Ref as a query value. Am i doing something wrong?
Edit: I made a fix for this, if you also have this problem, you can find the solution here: https://github.com/Norbiros/nuxt-open-fetch-x/pull/1
This should be completely fixed in v0.12.1