getCachedData causing repeated requests

[dextersiah]

Environment

• Operating System: Darwin
• Node Version: v20.11.0
• Nuxt Version: 3.11.2
• CLI Version: 3.11.1
• Nitro Version: 2.9.6
• Package Manager: yarn@1.22.21
• Builder: -
• User Config: app, devtools, experimental, typescript, modules, css, runtimeConfig, components, googleFonts, i18n, alias, nitro, build
• Runtime Modules: @pinia/nuxt@0.4.11, @nuxtjs/tailwindcss@6.12.0, @nuxtjs/google-fonts@3.2.0, @nuxt/image@1.5.0, @vueuse/nuxt@10.9.0, @nuxtjs/i18n@8.3.0, dayjs-nuxt@2.1.9
• Build Modules: -

Reproduction

https://stackblitz.com/edit/github-fu2dhl?file=composables%2FapiFetch.ts

Describe the bug

I've created a composable around useFetch to simplify the usage of getCachedData. However I've noticed that there was a repeated request sent if getCachedData is passed as the options for useFetch.

If the getCachedData is not passed as an option, the request is only sent once.

Additional context

I initially stumble upon this bug after noticing that a weird behavior whereby if i refresh the page it would display my data as usual and the data request is fetched on the client once again causing a flicker when using v-if / v-else

Logs

------------------
With getCachedData
------------------

hit apiFetch
Cache disabled || invalidateCache /api/test false false
Cache disabled || invalidateCache /api/test false false
Cache disabled || invalidateCache /api/test false false
hit server api
hit apiFetch
Cache disabled || invalidateCache /api/test false false
Cache disabled || invalidateCache /api/test false false
Cache disabled || invalidateCache /api/test false false
hit server api
hit server api


---------------------
Without getCachedData
---------------------
hit apiFetch
hit server api

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• github-fu2dhl (Open reproduction)

[huang-julien]

Hey 👋 Thanks for the reproduction. I see that there's some hydration issues in it. Can you try fix it ?

[dextersiah]

Hey 👋 Thanks for the reproduction. I see that there's some hydration issues in it. Can you try fix it ?

Hey @huang-julien I've fixed the hydration issue. Forgot to wrap the content in a single root element