nuxt-open-fetch icon indicating copy to clipboard operation
nuxt-open-fetch copied to clipboard

Nuxt 3.15.1 breaks the module

Open TheDutchCoder opened this issue 11 months ago • 14 comments

Environment



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

TheDutchCoder avatar Jan 07 '25 17:01 TheDutchCoder

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.

Image

ReWWeR avatar Jan 18 '25 21:01 ReWWeR

It may not be related but I did get a momentary null value here: https://github.com/enkot/nuxt-open-fetch/issues/62.

jonkri avatar Jan 19 '25 05:01 jonkri

adding a key works as a workaround:

const { data } = await useApi('/rest', {
  key: 'media',
})

woldtwerk avatar Feb 03 '25 15:02 woldtwerk

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

ReWWeR avatar Mar 20 '25 18:03 ReWWeR

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 avatar Mar 22 '25 09:03 Norbiros

@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

ReWWeR avatar Mar 22 '25 14:03 ReWWeR

And I am automatically generating it by hand. It works here https://github.com/Hack4Krak/Hack4KrakSite/pull/395...

Norbiros avatar Mar 22 '25 14:03 Norbiros

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

ReWWeR avatar Mar 22 '25 14:03 ReWWeR

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)

danielroe avatar Mar 22 '25 14:03 danielroe

If I remember correctly I was able to reproduce it in 3.16.1, but I can check it again but in few hours

Norbiros avatar Mar 22 '25 14:03 Norbiros

@danielroe checked it on v3.16.1 and got the same issue

ReWWeR avatar Mar 24 '25 15:03 ReWWeR

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

Image

TheDutchCoder avatar Apr 02 '25 12:04 TheDutchCoder

@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!!

d9k avatar Apr 07 '25 04:04 d9k

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

Pentadome avatar Apr 24 '25 14:04 Pentadome

This should be completely fixed in v0.12.1

Norbiros avatar Jun 18 '25 17:06 Norbiros