",[2934,2935],{"name":2922,"color":2923},{"name":2936,"color":2937},"needs reproduction","FBCA04",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.6180618,{"description":2945,"labels":2946,"number":2951,"owner":2925,"repository":2925,"state":2939,"title":2952,"updated_at":2953,"url":2954,"score":2955},"### Environment\n\nN/A\n\n### Reproduction\n\n[Reproduction](https://stackblitz.com/edit/nuxt-usefetch-bug?file=app.vue,composables%2Futil.ts).\n\n### Describe the bug\n\nWhen `useFetch` is shared between multiple calls, i.e it has been wrapped in another function the benefits of the `autoKey` are lost. \r\n\r\nIt is not uncommon to wrap `useFetch` in another function in order to set headers upon each request to an API, for example setting the authorization header. \r\n\r\nThis means that the autoKey is no longer unique. This is fine for most purposes but fails in some [specific circumstances](https://github.com/nuxt/nuxt/blob/9741f267be1c04a69f3a25204c175f98d834565b/packages/nuxt/src/app/composables/fetch.ts#L72). For example using function to define the path, `() => '/api/fetch'` with no unique query string or parameters. \n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2947,2950],{"name":2948,"color":2949},"3.x","29bc7f",{"name":2922,"color":2923},22377,"`useFetch` hash collisions when sharing a call","2023-07-29T04:23:09Z","https://github.com/nuxt/nuxt/issues/22377",0.6195001,{"labels":2957,"number":2960,"owner":2925,"repository":2925,"state":2939,"title":2961,"updated_at":2962,"url":2963,"score":2964},[2958,2959],{"name":2948,"color":2949},{"name":2922,"color":2923},14447,"There is a problem with the auto-generated key of useFetch ()","2023-01-19T17:35:26Z","https://github.com/nuxt/nuxt/issues/14447",0.62397164,{"description":2966,"labels":2967,"number":2970,"owner":2925,"repository":2925,"state":2939,"title":2971,"updated_at":2972,"url":2973,"score":2974},"### Environment\n\n- Operating System: `Darwin`\r\n- Node Version: `v18.11.0`\r\n- Nuxt Version: `3.0.0`\r\n- Nitro Version: `0.5.4`\r\n- Package Manager: `npm@8.19.2`\r\n- Builder: `vite`\r\n- User Config: `-`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n\n\n### Reproduction\n\nVisit this URL for reproduction: https://stackblitz.com/edit/github-dgdjfn\n\n### Describe the bug\n\n`useFetch` is not preserving state if the URL or the options key is the same\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2968,2969],{"name":2948,"color":2949},{"name":2922,"color":2923},15600,"`useFetch` is not preserving state when key or url is same","2023-01-19T18:39:56Z","https://github.com/nuxt/nuxt/issues/15600",0.63329685,{"description":2976,"labels":2977,"number":2979,"owner":2925,"repository":2925,"state":2939,"title":2980,"updated_at":2981,"url":2982,"score":2983},"### Environment\n\n- Operating System: Linux\n- Node Version: v18.20.3\n- Nuxt Version: 3.15.4\n- CLI Version: 3.22.2\n- Nitro Version: 2.10.4\n- Package Manager: npm@10.2.3\n- Builder: -\n- User Config: compatibilityDate, devtools\n- Runtime Modules: -\n- Build Modules: -\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-pwetu3nb?file=app.vue\n\n### Describe the bug\n\nI have a component with `useFetch`. The component takes props that are used as body arguments in `useFetch`. When I use the component multiple times, the last `useFetch` seems to overwrite the data in other components. The props are different for each component instance and I also tried to add different `key`s.\n\nThe network tab shows that the data is fetched correctly but then Nuxt messes things up.",[2978],{"name":2922,"color":2923},31098,"useFetch overwrites data when component is used multiple times","2025-02-24T14:47:50Z","https://github.com/nuxt/nuxt/issues/31098",0.63355166,{"labels":2985,"number":2992,"owner":2925,"repository":2925,"state":2939,"title":2993,"updated_at":2994,"url":2995,"score":2996},[2986,2987,2990],{"name":2948,"color":2949},{"name":2988,"color":2989},"bug","d73a4a",{"name":2991,"color":2937},"🔨 p3-minor",14499,"Duplicate response when calling a composable with useLazyFetch inside","2023-01-19T17:36:12Z","https://github.com/nuxt/nuxt/issues/14499",0.6341675,{"description":2998,"labels":2999,"number":3002,"owner":2925,"repository":2925,"state":2939,"title":3003,"updated_at":3004,"url":3005,"score":3006},"### Environment\n\n- Operating System: Windows_NT\r\n- Node Version: v21.1.0\r\n- Nuxt Version: 3.10.2\r\n- CLI Version: 3.10.1\r\n- Nitro Version: 2.8.1\r\n- Package Manager: npm@10.2.5\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-yjwcwx\n\n### Describe the bug\n\nWhen\r\n`useAsyncData` `key` is set to `defer`\r\n\r\nHaving the request on `App.vue` and the children causes it to make the request twice. I would expect this to be make the request once when the page is reloaded. I guess currently It doesn't dedupe the request correctly when it's on different levels even though the key is the same. Also the `refreshNuxtData` runs once as it should. But this behavior is different than what happens when you refresh the page.\r\n\r\nWhen\r\n`useAsyncData` `key` is set to `cancel`\r\n\r\nThis is the worst case scenario. Makes request for every `useAsyncData`. The same goes for `refreshNuxtData`. No dedupe at all.\r\n\r\n\r\n\r\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3000,3001],{"name":2948,"color":2949},{"name":2922,"color":2923},25853,"UseFetch / UseAsyncData Dedupe not Working","2024-06-20T11:09:06Z","https://github.com/nuxt/nuxt/issues/25853",0.6367907,{"description":3008,"labels":3009,"number":3014,"owner":2925,"repository":2925,"state":2939,"title":3015,"updated_at":3016,"url":3017,"score":3018},"### Environment\n\n```\nNuxt project info: (copied to clipboard) nuxi 2:54:09 PM\n\n------------------------------\n- Operating System: Linux\n- Node Version: v22.13.1\n- Nuxt Version: 3.17.5\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.12\n- Package Manager: npm@11.3.0\n- Builder: -\n- User Config: compatibilityDate, devtools\n- Runtime Modules: -\n- Build Modules: -\n------------------------------\n\n👉 Report an issue: https://github.com/nuxt/nuxt/issues/new?template=bug-report.yml\n👉 Suggest an improvement: https://github.com/nuxt/nuxt/discussions/new\n👉 Read documentation: https://nuxt.com\n```\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-niu8rr4u?file=plugins%2FfetchSwapi.ts,composables%2FuseFetchSwapi.ts,pages%2Findex.vue\n\n### Describe the bug\n\nThe project I'm working on has a custom `useFetch` wrapper, using the exact recipe described in the Nuxt docs, [here](https://nuxt.com/docs/guide/recipes/custom-usefetch). In the linked [Stackblitz](https://stackblitz.com/edit/github-niu8rr4u?file=plugins%2FfetchSwapi.ts,composables%2FuseFetchSwapi.ts,pages%2Findex.vue), the custom wrapper is exposed as `useFetchSwapi`, and configured with a `baseURL` pointing to the public Star Wars API.\n\nIn the project's code, we want to use this custom `useFetchSwapi` with `immediate: false` and `watch: false` from a component's setup function. The component gets query parameters from user input, then calls the `execute` method manually on a button click. This component is repeated multiple times in a parent component, so there are multiple calls to `useFetchSwapi` with an identical URL, options, etc.\n\nIn the reproduction I've provided, I have simplified this a bit by calling `useFetchSwapi` twice in the same component, `pages/index.vue`. A button click handler sets reactive query parameters, then calls the `execute()` function from both `useFetchSwapi` calls (aliased as `fetchPerson1` and `fetchPerson2`). The Network Panel shows the query parameters from the first `useFetchSwapi` call being used on both fetches, which I think is a bug.\n\nI think this is related to the `key` option of `useFetch`. Further, I think this might be related to (or even the same issue as) #32437. Here's why:\n\n- If I initialize one of the reactive `query` objects differently than the other, the issue goes away. E.g., set `const query1 = reactive({name: 'a'})` and the correct query parameters are sent.\n- If I set a random `key` in the `useFetchSwapi` options (i.e. `key: String(Math.random())`), the issue goes away.\n- Using `useFetch` directly, without the wrapper, fixes the bug. I.e. update `index.vue` with two calls to `useFetch` instead of `useFetchSwapi` and the correct query parameters are sent in each call.\n\nThat last bullet is a bit of a curve ball, and makes me think that this might be different than #32437, hence the report. Apologies if this is a duplicate.\n\nThank you in advance for any help, and please let me know if I can provide anything else or clarify what's going on in the repro. code.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3010,3011],{"name":2922,"color":2923},{"name":3012,"color":3013},"possible regression","B90A42",32463,"With multiple identical calls to a custom useFetch wrapper, query parameter updates are not applied to manual refresh/execute calls","2025-06-24T07:30:25Z","https://github.com/nuxt/nuxt/issues/32463",0.6396274,{"description":3020,"labels":3021,"number":3024,"owner":2925,"repository":2925,"state":2939,"title":3025,"updated_at":3026,"url":3027,"score":3028},"### Environment\r\n\r\n \"nuxt\": \"^3.0.0\",\r\n\r\n\r\n### Reproduction\r\n\r\nI created a composable as follows to attach a header whenever I use the useFetch function.\r\n\r\n```\r\nexport const useCommon = () => {\r\n async function useFetchToken(api: string, option: useFetchTokenTyle){\r\n const autoOption:any = {\r\n headers: (option.headers) ?? { Authorization: 'Bearer ' + ado_token.value }\r\n }\r\n ...\r\n return await useFetch(api, {...option,...autoOption}) \r\n }\r\n return {\r\n useFetchToken\r\n }\r\n}\r\n```\r\nand I use this useFetchToken composable twice in one\r\n\r\n```\r\n\u003Cscript setup lang=\"ts\">\r\nconst { useFetchToken } = useCommon()\r\nlet {data:category_lists, refresh:cateRefresh} = await useFetchToken('/api/action', { \r\n baseURL: CATEGORY_API,\r\n method: 'post',\r\n body: {\r\n action: 'DoSomeThing',\r\n }\r\n})\r\n\r\nlet {data:section_lists, refresh:sectionRefresh} = await useFetchToken('/api/action', { \r\n baseURL: CATEGORY_API,\r\n method: 'post',\r\n body: {\r\n action: 'DoSomeThing2',\r\n }\r\n})\r\n```\r\nThen, a strange result occurs.\r\n\r\n\"category_lists\" affect from second useFetchToken composable. \"category_lists\" is overwritten by 2nd useFetchToken composable.\r\n\r\n\r\n\r\n\r\n\r\n### Describe the bug\r\n\r\nThe 2 fetchs are return different results.\r\n\r\nBut when I refresh, category_lists is equals to section_lists.\r\n\r\nWhen I run cateRefresh, category_lists get right result.\r\nWhen I delete 2nd useFetchToken part, \"category_lists\" work correctly.\r\nWhen I change useFetchToken to useFetch, it will work well all.\r\n",[3022,3023],{"name":2948,"color":2949},{"name":2922,"color":2923},12440,"When I use the method from composable twice, it works weird","2023-01-19T16:06:25Z","https://github.com/nuxt/nuxt/issues/12440",0.6461858,["Reactive",3030],{},["Set"],["ShallowReactive",3033],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fzqez61DW12sruLrPebpmnKNdYdZkSphuOrfWeJnb7C8":-1},"/nuxt/nuxt/28169"]