\r\n\u003C/template>\r\n\r\n\u003Cscript setup>\r\nimport {fetchCategories, fetchLocations} from '~/services/home';\r\n\r\nconst categoriesRequest = ref({pending: true, error: null, data: null});\r\nconst locationsRequest = ref({pending: true, error: null, data: null});\r\n\r\nconst res = await Promise.all([fetchCategories(), fetchLocations({filter: 0})]);\r\n\r\nif (res[0].error.value || res[1].error.value) {\r\n showError(res[0].error.value || res[1].error.value);\r\n} else {\r\n categoriesRequest.value = res[0];\r\n locationsRequest.value = res[1];\r\n}\r\n\u003C/script>\r\n```\r\n\r\nnow let's see what are `fetchCategories` and `fetchLocations` functions\r\n\r\nservices/home.js\r\n```js\r\nimport {useEnv} from '~/utils/use-env';\r\n\r\nexport const fetchCategories = () => {\r\n const mainApi = useEnv('mainApi');\r\n\r\n return useFetch(\r\n `${mainApi}/homepage/categories`,\r\n {\r\n method: 'POST',\r\n server: true,\r\n }\r\n );\r\n};\r\n\r\nexport const fetchLocations = (payload = {}) => {\r\n const mainApi = useEnv('mainApi');\r\n\r\n return useFetch(\r\n `${mainApi}/homepage/locations`,\r\n {\r\n method: 'POST',\r\n body: payload,\r\n server: true,\r\n }\r\n );\r\n};\r\n```\r\n\r\nand this is the component we used in home page:\r\n\r\ncomponents/home/Index.vue\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cdiv class=\"categories-wrapper\">\r\n \u003Cdiv\r\n v-for=\"category in categories\"\r\n :key=\"category.key\"\r\n @click=\"setActiveCategory(category.id)\"\r\n >\r\n {{ category.title }}\r\n \u003C/div>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript setup>\r\nimport {fetchLocations} from '~/services/home';\r\n\r\nconst props = defineProps({\r\n categoriesRequest: {type: Object, required: true},\r\n locationsRequest: {type: Object, required: true},\r\n});\r\n\r\nconst categories = computed(() => {\r\n const items = [];\r\n\r\n if (props.categoriesRequest.data) {\r\n items.push(...props.categoriesRequest.data.items);\r\n }\r\n\r\n return [\r\n {\r\n id: 0,\r\n key: 'ALL',\r\n title: 'همه تورها',\r\n },\r\n ...items,\r\n ];\r\n});\r\n\r\nconst currentLocationsRequest = ref(props.locationsRequest);\r\n\r\nconst setActiveCategory = async (categoryId) => {\r\n currentLocationsRequest.value = await fetchLocations({filter: categoryId});\r\n};\r\n\u003C/script>\r\n```\r\n\r\n\r\n### Describe the bug\r\n\r\nwe are expecting `fetchCategories` and `fetchLocations` have been called in server side once and nothing else happens in client side.\r\nand when we click on each category element, `fetchLocations` should be called.\r\n\r\nbut this is not the behavior we actually see.\r\nwe see both function just have been called in client side.\r\nand this happens after upgrading nuxt from `3.0.0` to `3.2.2`.\r\nbefore that it worked fine.\r\nand i have to mention that this behavior happens only in production.\r\nif i change `setActiveCategory` to:\r\n```js\r\nconst setActiveCategory = async (categoryId) => {\r\n console.log(categoryId);\r\n};\r\n```\r\nit works fine again\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[3229,3230,3231],{"name":3146,"color":3147},{"name":3169,"color":3170},{"name":3232,"color":3233},"needs reproduction","FBCA04",19292,"useFetch ssr not working when use same function in page setup and click event on an element after upgrade nuxt to 3.2.2 from 3.0.0","2023-04-05T07:47:53Z","https://github.com/nuxt/nuxt/issues/19292",0.6560451,{"description":3240,"labels":3241,"number":3253,"owner":3158,"repository":3158,"state":3159,"title":3254,"updated_at":3255,"url":3256,"score":3257},"### Environment\r\n\r\nNuxi 3.5.0 \r\n\r\n------------------------------\r\n- Operating System: Darwin\r\n- Node Version: v16.16.0\r\n- Nuxt Version: 3.5.0\r\n- Nitro Version: 2.4.1\r\n- Package Manager: pnpm@8.6.1\r\n- Builder: vite\r\n- User Config: modules, experimental, css, colorMode, nitro, app, pwa, devtools, gtag, gtm, runtimeConfig\r\n- Runtime Modules: @vueuse/nuxt@10.1.2, @unocss/nuxt@0.51.13, @pinia/nuxt@0.4.11, @nuxtjs/color-mode@3.2.0, @vite-pwa/nuxt@0.0.9, nuxt-gtag@0.5.7, @zadigetvoltaire/nuxt-gtm@0.0.13\r\n- Build Modules: -\r\n------------------------------\r\n\r\n👉 Report an issue: https://github.com/nuxt/nuxt/issues/new \r\n\r\n👉 Suggest an improvement: https://github.com/nuxt/nuxt/discussions/new\r\n\r\n👉 Read documentation: https://nuxt.com\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/github-exbnmd?file=app.vue\r\nApologize for that I can't just expose our product api url to show you about the real case, hope the reproduction is enough to help.\r\n\r\n### Describe the bug\r\n\r\n`const { error } = await useFetch(api)`\r\nNormally `useFetch` and `error` worked perfectly.\r\nBut if the request respond without any message, something went wrong.\r\nIn my case, we setup a proxy for blocking DDoS. \r\nSo if you fetch too many times In a period of time, proxy response http code 429 (means 'too many requests') without error message, then do `console.log(error.value)` it output just like\r\n```\r\n{\r\n fatal: false,\r\n statusCode: 500,\r\n statusMessage: undefined,\r\n unhandled: false, \r\n}\r\n```\r\nAs you can see `statusCode` got overwrited by `500`, Besides including CORS and Timeout disconnect those error without message body show the same result.\r\n\r\n\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[3242,3245,3246,3247,3248,3250],{"name":3243,"color":3244},"good first issue","fbca04",{"name":3146,"color":3147},{"name":3149,"color":3150},{"name":3232,"color":3233},{"name":3249,"color":3233},"🔨 p3-minor",{"name":3251,"color":3252},"closed-by-bot","ededed",22724,"error `statusCode` is provided even if no status code is returned from fetch","2023-09-08T01:47:45Z","https://github.com/nuxt/nuxt/issues/22724",0.6565047,{"description":3259,"labels":3260,"number":3263,"owner":3158,"repository":3158,"state":3159,"title":3264,"updated_at":3265,"url":3266,"score":3267},"### Environment\n\nrc10\n\n### Reproduction\n\n\r\n\r\nserver-side route.get.js: \r\n`return createError({ statusCode: 500, statusMessage: 'foo some details' })`\r\n\r\nclient-side template.vue:\r\n\r\n```\r\n\u003Cscript server>\r\nconst { data, error } = await useFetch('/api/route')\r\n\r\nif (error) {\r\n// error does not contain any of the details that were in the response message that was created with createError\r\n}\r\n\u003C/script>\r\n```\n\n### Describe the bug\n\nuseFetch() does not forward server-side createError()\r\n\r\ncurrent behavior: generic error message appears in template\r\n\r\nexpected: full createError() message that is also visible when going to /api/route should be available in the vue template\r\n\n\n### Additional context\n\nMy current workaround is as follows: in useFetch() onResponseError(), re-throw the actual response data via createError. \r\nThen the error check `if(error)` will work and we can re-throw the error.\r\n\r\nIdeally, both the `onResponseError()` and the `if(error){throw error.value}` should not be needed.\r\n\r\n```\r\n\u003Cscript server>\r\nconst { data, error } = await useFetch('/api/route',\r\n {\r\n headers: useRequestHeaders(['cookie']),\r\n onResponseError({ request, response, options }) {\r\n throw createError(response._data)\r\n }\r\n }\r\n)\r\n\r\nif (error) {\r\n throw error.value\r\n}\r\n\u003C/script>\r\n```\n\n### Logs\n\n_No response_",[3261,3262],{"name":3146,"color":3147},{"name":3169,"color":3170},14977,"useFetch() does not forward server-side createError()","2024-02-21T08:06:58Z","https://github.com/nuxt/nuxt/issues/14977",0.65734035,["Reactive",3269],{},["Set"],["ShallowReactive",3272],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fg8Ua4HAleqiMs3wAz6c7KOPK3hSqenVrpRU-sKAJp0s":-1},"/nuxt/nuxt/24334"]