getCachedData causing repeated requests
dextersiah opened this issue · comments
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
Start a new pull request in StackBlitz Codeflow.
Hey 👋 Thanks for the reproduction. I see that there's some hydration issues in it. Can you try fix it ?
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