\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).",[2961],{"name":2962,"color":2963},"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.75522876,{"description":2970,"labels":2971,"number":2974,"owner":2903,"repository":2903,"state":2915,"title":2975,"updated_at":2976,"url":2977,"score":2978},"### 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```",[2972,2973],{"name":2926,"color":2927},{"name":2929,"color":2930},32467,"inconsistent behaviour useFetch","2025-06-24T21:21:12Z","https://github.com/nuxt/nuxt/issues/32467",0.75938714,{"description":2980,"labels":2981,"number":2986,"owner":2903,"repository":2903,"state":2915,"title":2987,"updated_at":2988,"url":2989,"score":2990},"### 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>",[2982,2983],{"name":2926,"color":2927},{"name":2984,"color":2985},"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":2992,"labels":2993,"number":2995,"owner":2903,"repository":2903,"state":2915,"title":2996,"updated_at":2997,"url":2998,"score":2999},"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```",[2994],{"name":2923,"color":2924},15378,"Typescript error for useFetch in strict mode","2023-01-19T17:49:19Z","https://github.com/nuxt/nuxt/issues/15378",0.7604493,{"description":3001,"labels":3002,"number":3005,"owner":2903,"repository":2903,"state":2915,"title":3006,"updated_at":3007,"url":3008,"score":3009},"### 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_",[3003,3004],{"name":2923,"color":2924},{"name":2926,"color":2927},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",3011],{},["Set"],["ShallowReactive",3014],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fal7zl0PDoCceOuKRlc58FyUGdLNHW3w-uVNIcrxhRrs":-1},"/nuxt/test-utils/1080"]