",[3048,3049],{"name":3019,"color":3020},{"name":3050,"color":3039},"needs reproduction",31900,"closed","`useFetch` makes duplicate requests on client-side page navigation when wrapped in a composable","2025-04-28T05:45:41Z","https://github.com/nuxt/nuxt/issues/31900",0.63108325,{"description":3058,"labels":3059,"number":3064,"owner":3022,"repository":3022,"state":3052,"title":3065,"updated_at":3066,"url":3067,"score":3068},"### Environment\n\n------------------------------\r\n- Operating System: `Darwin`\r\n- Node Version: `v16.14.0`\r\n- Nuxt Version: `3.0.0`\r\n- Nitro Version: `1.0.0`\r\n- Package Manager: `pnpm@7.14.2`\r\n- Builder: `vite`\r\n- User Config: `nitro`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n------------------------------\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-rpy2he?file=server%2Fapi%2Ftime.ts,app.vue\n\n### Describe the bug\n\n`useFetch` does not really de-duplicate requests, although the data is the same, but the api is called multiple times\r\n\r\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3060,3063],{"name":3061,"color":3062},"3.x","29bc7f",{"name":3019,"color":3020},12381,"useFetch does not de-duplicate requests","2023-01-19T16:23:50Z","https://github.com/nuxt/nuxt/issues/12381",0.63271326,{"description":3070,"labels":3071,"number":3075,"owner":3022,"repository":3022,"state":3052,"title":3076,"updated_at":3077,"url":3078,"score":3079},"### Environment\n\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v20.15.1\r\n- Nuxt Version: 3.13.1\r\n- CLI Version: 3.13.1\r\n- Nitro Version: 2.9.7\r\n- Package Manager: bun@1.1.28\r\n- Builder: -\r\n- User Config: compatibilityDate\r\nui, tailwindcss, css, vite, nitro, typescript\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\r\n\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-jdafkm?file=app.tsx\n\n### Describe the bug\n\nCalling `useFetch` / `useLazyFetch` with await returns:\r\n`[nuxt] A composable that requires access to the Nuxt instance was called outside of a plugin, Nuxt hook, Nuxt middleware, or Vue setup function. This is probably not a Nuxt bug. Find out more at `https://nuxt.com/docs/guide/concepts/auto-imports#vue-and-nuxt-composables`.`\r\n\r\nWhen I remove the `await` the page loads but I'm not sure is the correct way of using `useFetch`.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3072],{"name":3073,"color":3074},"documentation","5319e7",29003,"`useFetch` twice \"A composable that requires access to the Nuxt instance was called outside of a plugin...\"","2024-09-16T12:48:46Z","https://github.com/nuxt/nuxt/issues/29003",0.63700175,{"description":3081,"labels":3082,"number":3084,"owner":3022,"repository":3022,"state":3052,"title":3085,"updated_at":3086,"url":3087,"score":3088},"### Environment\n\n- Operating System: Darwin\n- Node Version: v20.14.0\n- Nuxt Version: 3.17.4\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.12\n- Package Manager: bun@1.2.9\n- Builder: -\n- User Config: compatibilityDate, devtools, nitro, modules\n- Runtime Modules: nitro-cloudflare-dev@0.2.2\n- Build Modules: -\n\n### Reproduction\n\n- Repo: https://github.com/serhii-chernenko/nuxt-usefetch-caching-issue\n- Demo: https://nuxt-usefetch-caching-issue.nuxt-test.workers.dev\n\n### Describe the bug\n\n# useFetch caching issue\n\nI see that Nuxt `3.17.4` has \"major\" imporvements regarding the usage of `useFetch` and `useAsyncData` composables that has to significantly improve performance by sharing and caching data without a requirement of usage `getCachedData`.\nThe same `key` value is enough.\n\nI wanted to play with this a bit and prepared this demo repo to explain my issue.\n\n- Repo: https://github.com/serhii-chernenko/nuxt-usefetch-caching-issue\n- Demo: https://nuxt-usefetch-caching-issue.nuxt-test.workers.dev\n- Nuxt updates: https://nuxt.com/blog/v3-17\n\n## Issue explanation\n\nI'm expecting that once I used `useFetch` with a key, e.g. `items`, it has to be cached and shared across all pages and components which use fetching for the same `key` (`items`).\n\nI prepared 2 pages:\n- Home page `/`\n- Items page `/items`\n\nThe `pages/items.vue` component includes the `components/Items.vue` component twice.\n\nIn the `Items.vue` I just used `useFetch`:\n```ts\nconst { data: items, error, refresh } = await useFetch(\"/api/items\", {\n key: \"items\",\n default: () => [],\n});\n```\n\nAnd there are 2 issue actually.\n\n### Network request retriggered when page accessed\n\nWhen I go to https://nuxt-usefetch-caching-issue.nuxt-test.workers.dev and then to https://nuxt-usefetch-caching-issue.nuxt-test.workers.dev/items, I see in the Network tab that the request sends again, every time. I kinda didn't expect this, because I guessed that the data has to be provided by cached data already by the `key`.\n\n\n\n**Note here**\nWhile the `Items.vue` inserted to the `pages/items.vue` twice, I added:\n```ts\ndedupe: 'defer`\n```\nto avoid duplicated request at the same time.\n\nIs this an expected behavior? Because I guessed once it's cached, there's no new requests expected until manually refreshed at least.\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3083],{"name":3019,"color":3020},32186,"Network request is sent even with the same `key` for `useFetch`","2025-07-15T15:23:31Z","https://github.com/nuxt/nuxt/issues/32186",0.64311945,{"description":3090,"labels":3091,"number":3093,"owner":3022,"repository":3022,"state":3052,"title":3094,"updated_at":3095,"url":3096,"score":3097},"### Environment\n\n- Operating System: Linux\r\n- Node Version: v22.4.1\r\n- Nuxt Version: 3.12.4\r\n- CLI Version: 3.12.0\r\n- Nitro Version: 2.9.7\r\n- Package Manager: npm@10.8.2\r\n- Builder: -\r\n- User Config: compatibilityDate, devtools\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n\n\n### Reproduction\n\nI've setup a repository with the minimal code here:\r\nhttps://github.com/Jannick94/nuxt-usefetch-dedupe/blob/main/app.vue\r\n\r\nIf StackBlitz is easier, I could also create a reproduction there but I thought it was easier to test in a 'real browser'.\n\n### Describe the bug\n\nI'm currently refactoring my code to correctly use the useFetch composable (according to the amazing video: https://www.youtube.com/watch?v=njsGVmcWviY). I discovered that performing a request to something like an profile/user API endpoint doesn't seem to correctly dedupe the request when this endpoint returns a erroneous status code like 404/401 etc.\r\n\r\nIn the reproduction's `app.vue` file I set up two tests, when using `useFetch` the correct way I see the api request in the browser networks tab. When I perform the request using `useFetch` the wrong way, I dont see the request in the network tab, as expected because it runs on the server and dedupes the response to the client.\r\n\r\nWhenever the request doesn't return a erroneous status code, it does get deduped correctly. I tried setting various `useFetch`/`fetch` options like `retry/retryStatusCodes` but none seem to produce my expected result.\r\n\r\nThanks!\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3092],{"name":3019,"color":3020},28413,"useFetch not deduplicating requests that return an error like 404, 401 etc.","2024-08-08T09:10:02Z","https://github.com/nuxt/nuxt/issues/28413",0.64492726,{"description":3099,"labels":3100,"number":3103,"owner":3022,"repository":3022,"state":3052,"title":3104,"updated_at":3105,"url":3106,"score":3107},"### Environment\r\n\r\n- Operating System: Windows_NT\r\n- Node Version: v21.0.0\r\n- Nuxt Version: 3.9.1\r\n- CLI Version: 3.10.0\r\n- Nitro Version: 2.8.1\r\n- Package Manager: pnpm@8.14.0\r\n- Builder: -\r\n- User Config: devtools\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/github-zkclkd?file=utils%2Ftest.ts\r\n\r\n### Describe the bug\r\n\r\nWhen creating a `composable` to fetch some data, I found that I couldn't call `useFetch` twice in the same function and then using `useStore` inside my component setup script.\r\n\r\n```js\r\nexport const useStore = async () => {\r\n await useFetch('/api/a')\r\n await useFetch('/api/b')\r\n}\r\n```\r\n\r\n```js\r\n\u003Cscript setup lang=\"ts\">\r\nawait useStore()\r\n\u003C/script>\r\n```\r\n\r\nI don't really know if this is a bug or if this is intended based on this [comment](https://github.com/nuxt/nuxt/issues/23434#issuecomment-1737484680).\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n```shell-script\r\n[nuxt] A composable that requires access to the Nuxt instance was called outside of a plugin, Nuxt hook, Nuxt middleware, or Vue setup function. This is probably not a Nuxt bug. Find out more at `https://nuxt.com/docs/guide/concepts/auto-imports#vue-and-nuxt-composables`.\r\n\r\nat Module.useAsyncData (C:\\Projects\\bug-usefetch\\node_modules\\.pnpm\\nuxt@3.9.1_vite@5.0.11\\node_modules\\nuxt\\dist\\app\\composables\\asyncData.js:26:38)\r\nat Module.useFetch (C:\\Projects\\bug-usefetch\\node_modules\\.pnpm\\nuxt@3.9.1_vite@5.0.11\\node_modules\\nuxt\\dist\\app\\composables\\fetch.js:60:43)\r\nat Module.useStore (C:\\Projects\\bug-usefetch\\utils\\test.ts:5:31)\r\nat async setup (C:\\Projects\\bug-usefetch\\app.js:16:107)\r\n```\r\n\r\nWhen previewing the application:\r\n\r\n```shell-script\r\n[nitro] [unhandledRejection] Error: [nuxt] instance unavailable\r\n at useNuxtApp (file:///C:/Projects/bug-usefetch/.output/server/chunks/app/server.mjs:296:13)\r\n at useAsyncData (file:///C:/Projects/bug-usefetch/.output/server/chunks/app/server.mjs:913:32)\r\n at useFetch (file:///C:/Projects/bug-usefetch/.output/server/chunks/app/server.mjs:1059:21)\r\n at useStore (file:///C:/Projects/bug-usefetch/.output/server/chunks/app/server.mjs:1098:9)\r\n at Timeout._onTimeout (file:///C:/Projects/bug-usefetch/.output/server/chunks/app/server.mjs:1106:13)\r\n at listOnTimeout (node:internal/timers:573:17)\r\n at process.processTimers (node:internal/timers:514:7)\r\n```",[3101,3102],{"name":3061,"color":3062},{"name":3019,"color":3020},25099,"Calling `useFetch` two times in a composable requires access to the nuxt instance","2024-03-12T22:40:32Z","https://github.com/nuxt/nuxt/issues/25099",0.6452638,{"description":3109,"labels":3110,"number":3114,"owner":3022,"repository":3022,"state":3052,"title":3115,"updated_at":3116,"url":3117,"score":3118},"### Environment\n\n- Operating System: Linux\r\n- Node Version: v16.20.0\r\n- Nuxt Version: 3.7.3\r\n- CLI Version: 3.9.0\r\n- Nitro Version: 2.6.3\r\n- Package Manager: npm@9.4.2\r\n- Builder: -\r\n- User Config: devtools\r\n- Runtime Modules: -\r\n- Build Modules: -\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-vryf1x-a7jgca?file=app.vue,pages%2Findex.vue,pages%2Ftest.vue\n\n### Describe the bug\n\nReloading a page where we use `use(Lazy)Fetch()` and also access the key of that fetch call using `useNuxtData` seems to omit the response from useFetch instead return the inital `null` value that useFetch has while mounting. \n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3111,3112,3113],{"name":3061,"color":3062},{"name":3035,"color":3036},{"name":3038,"color":3039},23349,"`useFetch server: false` breaks `useNuxtData` and vice versa","2023-10-16T19:20:04Z","https://github.com/nuxt/nuxt/issues/23349",0.6455157,{"description":3120,"labels":3121,"number":3124,"owner":3022,"repository":3022,"state":3052,"title":3125,"updated_at":3126,"url":3127,"score":3128},"### Environment\r\n\r\nUbuntu LTS\r\nNode LTS\r\nYarn \r\nNuxt 3.0 Stable (but the behavior was the same before upgrading)\r\n\r\n### Reproduction\r\n\r\nI made a quick unlisted video to show what I'm seeing : https://youtu.be/HLVo4bKutDc\r\n\r\nhere is the commit where I swapped useFetch() for $fetch which solved my problem \r\n[commit changing to $fetch](https://github.com/jurassicjs/nuxt3-fullstack-tutorial/commit/6285fd209826c9b706e907da51e92c62203c97a0#diff-cf165891da9c918972cea091125793e19b138cd81b25bde2b3236f604d7fd8ddR18)\r\n\r\nI wasn't able to reproduce the error on stackblitz. \r\n\r\n### Describe the bug\r\n\r\nuseFetch() sends doubled, but swapping useFetch() for $fetch does not. \r\n \r\nchanging useFetch() to $fetch caused to duplicate sending to stop. \r\n\r\n### Additional context\r\n\r\nThe component where the-double-sending-useFetch() is located is nested, and the parent component also contains a useFetch() \r\n\r\nPossibly related: https://github.com/nuxt/nuxt.js/issues/13369\r\n\r\n### Logs\r\n\r\n_No response_",[3122,3123],{"name":3061,"color":3062},{"name":3019,"color":3020},15528,"useFetch sends double Request in nested component ( Under some conditions )","2023-10-10T08:42:01Z","https://github.com/nuxt/nuxt/issues/15528",0.6482455,["Reactive",3130],{},["Set"],["ShallowReactive",3133],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fW4ni-8l4IYxI5iL9ny4LAmOKlxBoqNFMIixA-oPMzfI":-1},"/nuxt/nuxt/14499"]