\r\n\u003C!-- ... -->\r\n\u003C/template>\r\n\r\n\u003Cscript lang=\"ts\" setup>\r\n\r\nconst page = ref\u003Cnumber>(1)\r\n\r\n// temporary name \"promise\" -- maybe this could replace the \"pending\" boolean in Nuxt 4?\r\nconst { data, promise } = useFetch('/api/my-items', {\r\n query: {\r\n page: page\r\n }\r\n})\r\n\r\nasync function handleFetchMore() {\r\n page.value += 1\r\n // would this work? or would nextTick() need to be awaited before it?\r\n await promise.value\r\n}\r\n\r\n// ...\r\n\r\n\u003C/script>\r\n```\r\n\n\n### Additional information\n\n- [X] Would you be willing to help implement this feature?\n- [ ] Could this feature be implemented as a module?\n\n### Final checks\n\n- [X] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\n- [X] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[3246],{"name":3247,"color":3248},"discussion","538de2",26678,"Return the current promise from `useFetch` in a computed ref","2025-06-06T09:36:59Z","https://github.com/nuxt/nuxt/issues/26678",0.7552289,{"description":3255,"labels":3256,"number":3259,"owner":3188,"repository":3188,"state":3200,"title":3260,"updated_at":3261,"url":3262,"score":3263},"### Environment\n\n------------------------------\n- Operating System: Linux\n- Node Version: v22.3.0\n- Nuxt Version: 3.17.5\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.12\n- Package Manager: pnpm@9.15.4\n- Builder: -\n- User Config: compatibilityDate, devtools, future, vite, modules, css, runtimeConfig\n- Runtime Modules: @nuxt/ui@3.1.3, nuxt-svgo@4.2.2, @nuxt/image@1.10.0\n- Build Modules: -\n------------------------------\n\n### Reproduction\n\n```ts\n\u003Cscript setup lang=\"ts\">\nconst page = useState('movie-page', () => 1)\nconst data = useState\u003CMovie[]>('movie-data', () => [])\n\nconst { pending, execute } = await useFetch\u003CListResponse\u003CMovie>>('/api/tmdb/discover/movie', {\n query: {\n page,\n },\n async onResponse({ response }) {\n data.value.push(...response._data.results)\n },\n immediate: false,\n})\n\nif (data.value.length === 0)\n execute()\n\nconst pageContainer = useTemplateRef('pageContainer')\n\nonMounted(() => {\n const scrollContainer = document.getElementById('scrollContainer')\n scrollContainer?.addEventListener('scroll', () => {\n if (!pending.value && pageContainer.value && window.innerHeight + 1000 > pageContainer.value?.getBoundingClientRect().bottom) {\n page.value++\n }\n })\n})\n\u003C/script>\n```\n\n### Describe the bug\n\nI want to create an infinite scrollable page. To do so, I need to store the received data of `useFetch` in an array.\nSince I want to be able to navigate to another page and go back, without refetching all data, I use `useState`.\n\nHowever, when navigating back, `useFetch` would trigger again (with previous page value) if I use `immediate: true.` Therefore `immediate: false` is set and we manually call execute to fetch data on first page load.\n\nin the scroll listener, `page++` is called. The strange thing is:\n* On first page load, this is enough to retrigger fetching data. Not needing to call `execute()` manually.\n* Once navigated away and returning to the page, the `page` value is increased by the event listener (so still working), but `useFetch` does not trigger anymore.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3257,3258],{"name":3211,"color":3212},{"name":3214,"color":3215},32467,"inconsistent behaviour useFetch","2025-06-24T21:21:12Z","https://github.com/nuxt/nuxt/issues/32467",0.7593871,{"description":3265,"labels":3266,"number":3271,"owner":3188,"repository":3188,"state":3200,"title":3272,"updated_at":3273,"url":3274,"score":3275},"### Version\n\n[v2.5.1](https://github.com/nuxt.js/releases/tag/v2.5.1)\n\n### Reproduction link\n\n[https://codesandbox.io/s/13v2po80j4](https://codesandbox.io/s/13v2po80j4)\n\n### Steps to reproduce\n\nUpdate browser and please check the terminal\n\n### What is expected ?\n\nIs output as 'asyncData' and 'fetch' on terminal\n\n### What is actually happening?\n\nNot output\n\n### Additional comments?\n\nI refferd to [Official TypeScript support](https://nuxtjs.org/examples/typescript)\nSorry for the poor English\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This bug report is available on \u003Ca href=\"https://cmty.app/nuxt\">Nuxt\u003C/a> community (\u003Ca href=\"https://cmty.app/nuxt/nuxt.js/issues/c8892\">#c8892\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3267,3268],{"name":3211,"color":3212},{"name":3269,"color":3270},"2.x","d4c5f9",5330,"asyncData and fetch is not working on TypeScript","2023-01-22T15:33:04Z","https://github.com/nuxt/nuxt/issues/5330",0.76015496,{"description":3277,"labels":3278,"number":3280,"owner":3188,"repository":3188,"state":3200,"title":3281,"updated_at":3282,"url":3283,"score":3284},"Hello 👋,\r\n\r\nSince RC13 enables strict mode by default, I discovered that `useFetch` composable was throwing me typescript errors.\r\n\r\nin pages\r\n```ts\r\nconst { data: images } = await useFetch\u003CImageKit[]>('/api/imgkit')\r\nconst maxImageNumber = images.value.length // The object can have the value 'null'.ts(2531)\r\n```\r\n\r\nThis comes from the `data` property definition :\r\n\r\n```ts\r\nexport interface _AsyncData\u003CDataT, ErrorT> {\r\n data: Ref\u003CDataT | null>; // here. No error without \"| null\"\r\n pending: Ref\u003Cboolean>;\r\n refresh: (opts?: AsyncDataExecuteOptions) => Promise\u003Cvoid>;\r\n execute: (opts?: AsyncDataExecuteOptions) => Promise\u003Cvoid>;\r\n error: Ref\u003CErrorT | null>;\r\n}\r\n```",[3279],{"name":3208,"color":3209},15378,"Typescript error for useFetch in strict mode","2023-01-19T17:49:19Z","https://github.com/nuxt/nuxt/issues/15378",0.7604493,{"description":3286,"labels":3287,"number":3290,"owner":3188,"repository":3188,"state":3200,"title":3291,"updated_at":3292,"url":3293,"score":3294},"### Environment\n\nrc-13\r\nnode-18\n\n### Reproduction\n\n//composable\r\n```javascript\r\nconst myfetch = async (url,options,emits) => {\r\n const { data, pending, error, refresh } = await useFetch(url, {\r\n \r\n ...options,\r\n baseURL: useRuntimeConfig().API_URL, \r\n initialCache: false,\r\n headers: new Headers({ 'authorization': (process.client)?localStorage.getItem(\"token\"):''}),\r\n onResponse ({ response }) {\r\n return response._data\r\n },\r\n onResponseError ({ response }) {\r\n return response._data\r\n }\r\n })\r\n const resData = data.value\r\n \r\n return resData\r\n }\r\n```\r\n//component 1\r\n\r\n```javascript\r\n\u003Cscript setup>\r\ngetAllItems();\r\nasync function getAllItems() {\r\n let response = await myfetch('/article/artPosts?' +\r\n 'page=' + page.value + '&' +\r\n 'artPostGroup=' + artPostGroup.value + '&' +\r\n 'limit=' + limit.value, {\r\n method: 'GET'\r\n });\r\n if (response.data)\r\n list.value = response.data.docs;\r\n pages.value = response.data.pages;\r\n}\r\n\u003C/script>\r\n```\r\n\r\n//component 2\r\n\r\n```javascript\r\n\u003Cscript setup>\r\ngetAllItems();\r\nasync function getAllItems() {\r\n let response = await myfetch('/store/storeCourses?' +\r\n 'page=' + page.value + '&' +\r\n 'storeCourseGroup=' + storeCourseGroup.value + '&' +\r\n 'limit=' + limit.value, {\r\n method: 'GET'\r\n });\r\n if (response.data)\r\n list.value = response.data.docs;\r\n pages.value = response.data.pages;\r\n}\r\n\u003C/script>\r\n```\r\n//home.vue\r\n```javascript\r\n\u003Cdiv>\r\n\u003Ccomponent1>\u003C/component1>\r\n\u003Ccomponent2>\u003C/component2>\r\n\u003C/div>\r\n```\n\n### Describe the bug\n\nthe bug is here...\r\nin the page load:\r\nresponse of component1 is the same as response of component2...\r\n\r\n\r\nwhen i use $fetch instead of useFetch, it works good but it makes another problem for me...\r\n\r\non refreshing page,it send a request twice to server\r\n\n\n### Additional context\n\nhow can i write function in composables?\n\n### Logs\n\n_No response_",[3288,3289],{"name":3208,"color":3209},{"name":3211,"color":3212},15451,"UseFetch() calling multiple request, only the last data is fetched and $fetch send requests twice","2023-01-19T17:50:37Z","https://github.com/nuxt/nuxt/issues/15451",0.7623312,["Reactive",3296],{},["Set"],["ShallowReactive",3299],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fal7zl0PDoCceOuKRlc58FyUGdLNHW3w-uVNIcrxhRrs":-1},"/nuxt/test-utils/1080"]