Component is already mounted, please use $fetch instead

[hmuyin]

pages/a.vue
`<script setup lang="ts">

const click = async () => {
useFetchPost("/api/test", {})
.then(async res => {
await navigateTo('/conter')
})
}

</script> Test `

composables/mHttp.ts
export const useFetchPost = <T>( url: string, param?: object ) => new Promise<T>((resolve, reject) => { return useFetch(url, { watch: false, method: 'POST', body: param }) .then(resolve) .catch(reject) }

Console Warning
[nuxt] [useFetch] Component is already mounted, please use $fetch instead. See https://nuxt.com/docs/getting-started/data-fetching

This warning appears on the console every time a button is clicked to send a request. It appears after updating to version 3.10. What is the reason for this

[manniL]

You probably misuse useFetch. Check out my video which explains it in detail.

[hmuyin]

I watched your video, but it didn't explain the questions I raised

[manniL]

You used a composable outside of the Vue context (in your case in a button handler). Same what I showed in my video.

Since 3.10, this will throw a warning. See also #2507

[hmuyin]

Thank you very much, but this is not convenient. In my project, useFetch will be re encapsulated, and both server and client requests will use the same function. In the future, client requests will be encapsulated into another function, which feels a bit inconvenient

[manniL]

But this is how composables work :D
I suggested a better option of "dealing with that" in the video (2nd approach)

[RukshanJS]

Watched whole of your video. Very helpful. My requirement was to using auth headers in every request. In your video you have mentioned $fetch for that or a wrapper - which is exactly what I did - just wanted some validation from someone who knows. Started nuxt like a 3 days ago and already love it. Thanks!

[undermoonn]

If you want to use useFetch, you can try codes below:

// composables/mHttp.ts
export const useFetchPost = (url: string, param?: object, key?: string) =>
  useFetch(url, {
    watch: false,
    method: 'POST',
    body: param,
    immediate: false,
    key,
  })

<script setup lang="ts">
const { refresh, data } = useFetchPost('/api/test', {})

const click = () => {
  refresh().then(() => {
    navigateTo('/conter')
  })
}
</script>

export default defineNuxtConfig({
  optimization: {
    keyedComposables: [
      {
        name: 'useFetchPost',
        argumentLength: 3
      }
    ]
  }
})

[hmuyin]

Yes, according to your method, it is feasible, but it is not very convenient for me and the current project because I have encapsulated useFetch twice. All requests in the entire project will use useFetchPost wherever they are. If this change is made, each user triggered request event will be defined first, and then "refresh" will be used, making it very inconvenient

[juni0r]

I get this warning with useFetch in a middleware.

// file: ~/middleware/auth.global.ts

export default defineNuxtRouteMiddleware(async () => {
  const { user } = useAuth()

  const { data } = await useFetch('/api/auth/user')
  user.value = data.value
})

The documentation states:

useFetch is a composable meant to be called directly in a setup function, plugin, or route middleware.

---

If I use $fetch instead as the warning suggests, it doesn't work with SSR and the console gets flooded with hydration mismatch errors.

export default defineNuxtRouteMiddleware(async () => {
  const { user } = useAuth()

  user.value = await $fetch('/api/auth/user')
})

According to the docs:

During server-side rendering, calling $fetch to fetch your internal API will directly call the relevant function (emulating the request), saving an additional API call.

---

Using the first method, everything works presto, apart from the warning. So this is a tad bit confusing. Can you elaborate @manniL?

[xdiegom]

Same here, somehow I think that you have to create two "api composables" or somehow to handle data. I have tried to do it but one composable works (with the warnings and other errors) and the other one throws me CORS errors.

I am currently struggling with this and is too confusing to the point that I feel disappointed that I can't solve it 😞 .

For now, I'll live with that warning.

[metkm]

@manniL Hey!, I have the same issue here. Using useAsyncData inside middleware causes it to throw warnings. How It should be handled?

[GhostvOne]

I've found a way to deal with that error by using $fetch in the middleware and isHydrating to prevent double api call

export default defineNuxtRouteMiddleware(async () => {
    const nuxtApp = useNuxtApp()
    if (nuxtApp.isHydrating) return;

  const { user } = useAuth()

  user.value = await $fetch('/api/auth/user')
})

Is that a good way @manniL ? What do you think.

[yarin-zhang]

I share the same confusion. My project requires SSR, so I migrated from Vue 3 to Nuxt 3. The problem this brought was that I needed to convert all axios requests to the useFetch approach. This is not a small task, but I am working hard on it.

During development, I repeatedly read the documentation and could roughly understand the design concepts of useFetch, useAsyncData, and $fetch. SSR requires hydration, so in most cases, using useFetch can effectively solve problems related to data requests. I once thought this was the recommended approach in Nuxt 3.

But I only recently upgraded to Nuxt 3.10.x, and I also encountered this prompt. The hint seems to suggest, "Hey, you shouldn't use useFetch for everything, you need to use $fetch to implement best practices and compensate for the shortcomings of useFetch." However, the provided documentation is not specifically aimed at resolving this prompt.

Moreover, I cannot achieve my goal by simply replacing useFetch with $fetch, and the documentation does not mention how to implement it. This also left me confused for a while.

It would be very helpful if the Nuxt official could provide a clear document to tell us how to specifically solve this problem.

[manniL]

Rule of thumb:

If you need the data for hydration, useFetch / useAsyncData is the way!
When sending e.g. a form or respond to a button click, $fetch is the way to go.

See also approach 2 in the video, where you can use useFetch for both by defining it "earlier"/"top-level" ☺️

[xjccc]

@manniL Hi, brother. Could you give me some advice for my module nuxt-custom-fetch to solve this problem, when i click the button to fetch data.
Component is already mounted, please use $fetch instead
stackblitz

[cjpearson]

@manniL I think that's a really helpful rule of thumb. Do you think there's a good place to add it into the docs? From what I've seen the docs mainly emphasize the double-fetching behavior when you call $fetch in a setup function. This is important, but it might be part of the reason why useFetch is overused. Perhaps it should also be mentioned that $fetch is preferred when you are in a place where it's not acceptable to call a composable function?

[manniL]

I'd reckon on the useFetch page itself 👍

[cjpearson]

Ah digging around a bit, it looks like a similar summary is on this page https://nuxt.com/docs/getting-started/data-fetching

[isaackearl]

I use useFetch in my pinia stores... and I get this warning.
Does that mean I'm supposed to use $fetch instead always? My pinia stores are isolated and I've watched the video of the issues with using useFetch in different scenarios, but none of those negative affects happen to me. Pinia is probably protecting me from some of those negative side affects, but this warning is still there. It's a huge project so I'm not looking forward to refactoring all the useFetch calls.

[jumptrnr]

Nuxt 3.10.3 and

• Runtime Modules: @pinia/nuxt@0.5.1, @pinia-plugin-persistedstate/nuxt@1.2.0, @nuxtjs/apollo@5.0.0-alpha.13, nuxt-graphql-client@0.2.33, ()

I'm using await useAsyncQuery(query, input) in a function called in my setup (composition API) and still see this error.

The query in in this case is a graphql query using nuxtjs/apollo per above.

The calls complete before onMounted for the page is called.
So what component is already mounted here in the warning?

[venson]

i want to do pagination with usefetch, but I got following problem

<template>
    <component :value="data"/>
</template>
<script setup>

const route = useRoute()
const page = ref(route.query.page)
const {data} = await useFetch(`myapi/${page.value})
watch(() => route.query, () => {
    page.value = route.query.page
    // the page ref was updated, but the data get by useFetch will not get fetched 
   //  if i use useFetch again i got warnning

)
//...

</script>

[hmuyin]

这是一封自动回复邮件。已经收到您的来信，我会尽快回复。

[KhaledOmara]

I found the solution and it's working for me,
After watching a lot of videos and reading the docs,
The main key is that useFetch just working in The Nuxt Context. and (setup function, plugin, or route middleware)
So I used it:

nuxtApp.runWithContext(async () => {});

composables/useHttp.ts

import type { Pinia } from "pinia";
export function useHttp() {
	process.env.NODE_TLS_REJECT_UNAUTHORIZED = "0";
	const nuxtApp = useNuxtApp();
	const mainStore = useMainStore(nuxtApp.$pinia as Pinia);
	const { setPwaToken } = useSettings();

	const getHeaders = computed((): HeadersInit => {
		const requestHeaders = useRequestHeaders(["cookie"]) as HeadersInit;
		if (mainStore.pwaToken && mainStore.pwaCode) {
			requestHeaders["Pwa-Token"] = mainStore.pwaToken;
			requestHeaders["Pwa-Code"] = mainStore.pwaCode;
		}
		if (process.client) {
			if (document.cookie) {
				const currentCookies = document.cookie.split(";") as any;
				requestHeaders["pwacookie"] = currentCookies;
			}
		}
		return requestHeaders;
	});

	type SendRequestResponse = {
		data: any;
		pending: any;
		error: any;
		//refresh: any;
	};

	const sendPostRequest = async (
		url: string,
		sendData: any,
		lazy = false,
		signal?: AbortSignal
	): Promise<SendRequestResponse> => {
		return nuxtApp.runWithContext(async (): Promise<SendRequestResponse> => {
			const { data, pending, error } = await useFetch(url, {
				method: "POST",
				body: sendData,
				headers: getHeaders.value as HeadersInit,
				credentials: "include",
				signal,
				lazy,
			});

			if (error.value) {
				if (error.value.statusCode == 503) {
					await new Promise((resolve) => setTimeout(resolve, 200)); // wait before retrying
					return sendPostRequest(url, sendData, lazy, signal);
				}
			}

			if (data.value) {
				if (Object.prototype.hasOwnProperty.call(data.value, "pwaCookie")) {
					const pwaCookie = data.value["pwaCookie"];
					delete data.value["pwaCookie"];
					pwaCookie.forEach((cookie: any) => {
						const cookieArr = cookie.split(";");
						const name = cookieArr[0].split("=")[0];
						const value = cookieArr[0].split("=")[1];
						const exDate = cookieArr[1].split("=")[1];
						const generatedCookie =
							name + "=" + value + ";expires=" + exDate + ";path=/";
						if (process.client) {
							document.cookie = generatedCookie;
						}
					});
				}

				if (Object.prototype.hasOwnProperty.call(data.value, "token-valid")) {
					if (data.value["token-valid"] === false) {
						await setPwaToken();
						await new Promise((resolve) => setTimeout(resolve, 200)); // wait before retrying
						return sendGetRequest(url, lazy, signal);
					}
				}
			}

			return new Promise((resolve, reject) => {
				if (error.value) {
					reject({ data, pending, error });
				} else {
					resolve({ data, pending, error });
				}
			});
		});
	};

	const sendGetRequest = async (
		url: string,
		lazy = false,
		signal?: AbortSignal
	): Promise<SendRequestResponse> => {
		return nuxtApp.runWithContext(async (): Promise<SendRequestResponse> => {
			const { data, pending, error } = await useFetch(url, {
				method: "GET",
				headers: getHeaders.value as HeadersInit,
				credentials: "include",
				signal,
				lazy,
			});

			if (error.value) {
				if (error.value.statusCode == 503) {
					await new Promise((resolve) => setTimeout(resolve, 200)); // wait before retrying
					return sendGetRequest(url, lazy, signal);
				}
			}

			if (data.value) {
				if (Object.prototype.hasOwnProperty.call(data.value, "pwaCookie")) {
					const pwaCookie = data.value["pwaCookie"];
					delete data.value["pwaCookie"];
					pwaCookie.forEach((cookie: any) => {
						const cookieArr = cookie.split(";");
						const name = cookieArr[0].split("=")[0];
						const value = cookieArr[0].split("=")[1];
						const exDate = cookieArr[1].split("=")[1];
						const generatedCookie =
							name + "=" + value + ";expires=" + exDate + ";path=/";
						if (process.client) {
							document.cookie = generatedCookie;
						}
					});
				}

				if (Object.prototype.hasOwnProperty.call(data.value, "token-valid")) {
					if (data.value["token-valid"] === false) {
						await setPwaToken();
						await new Promise((resolve) => setTimeout(resolve, 200)); // wait before retrying
						return sendGetRequest(url, lazy, signal);
					}
				}
			}

			return new Promise((resolve, reject) => {
				console.log("Response received from server", {
					data: data.value,
					pending: pending.value,
					error: error.value,
				});
				if (error.value) {
					reject({ data, pending, error });
				} else {
					resolve({ data, pending, error });
				}
			});
		});
	};

	return {
		getHeaders,
		sendPostRequest,
		sendGetRequest,
	};
}

Then use it anywhere:
app.vue:

const { sendPostRequest, sendGetRequest } = useHttp();
sendPostRequest(getEndpointUrl("getConfigs"), {
	paths: configPaths.join(","),
})
	.then((res: any) => {
		const data = res.data.value;
	}).catch((e) => {
		console.log(e);
	});

[cjpearson]

Is there a reason why $fetch did not work? It looks like a much more appropriate tool for the job in this case.

[KhaledOmara]

Here is another solution that worked perfectly for me, I've just finished and tested it:

I've created a plugin as follows:
plugins/api.ts

import { useAPIEndpoints } from "~/composables/useAPIEndpoints";

export default defineNuxtPlugin({
	name: "eptAPI",
	setup() {
		const { API_URL } = useAPIConfig();
		const { API_ENDPOINTS } = useAPIEndpoints();
		const pwaToken = useCookie("eptPwaToken");
		const pwaCode = useCookie("eptPwaCode");
		const pwaCookie = useCookie("eptPwaCookie");

		const createToken = async () => {
			const { data, status } = await useFetch<{ access: string }>(
				API_URL + API_ENDPOINTS.getToken,
				{
					method: "GET",
				}
			);

			if (status.value === "success") {
				const response = data.value;
				pwaToken.value = response["Pwa-Token"];
				pwaCode.value = response["Pwa-Code"];

				return {
					pwaToken: response["Pwa-Token"],
					pwaCode: response["Pwa-Code"],
				};
			} else {
				throw new Error("Generate token failed");
			}
		};

		const eptAPI = async (
			url: string,
			data?: any,
			immediate = true,
			signal?: AbortSignal,
			lazy = false
		) => {
			return useFetch(url, {
				baseURL: API_URL,
				method: data ? "POST" : "GET",
				body: data,
				immediate,
				signal,
				lazy,
				onRequest: async ({ options }) => {
					options.headers = options.headers || {};
					options.headers["Content-Type"] = "application/json";
					if (pwaCookie.value) {
						options.headers["pwacookie"] = pwaCookie.value;
					}
					if (!pwaToken.value || !pwaCode.value) {
						await createToken();
					}
					options.headers["Pwa-Token"] = pwaToken.value;
					options.headers["Pwa-Code"] = pwaCode.value;
				},
				onResponse: async ({ response }) => {
					if (response.status === 503) {
						return await eptAPI(url, data);
					}
					if (response._data["token-valid"] == false) {
						await createToken();
						return await eptAPI(url, data);
					}
				},
			});
		};

		return {
			provide: {
				eptAPI,
			},
		};
	},
});

You can of course get rid of "createToken".

Then you can use it in components as follows:

const { $eptAPI } = useNuxtApp(); // get the plugin instance
const menuItems = ref([]);
const { data: menuData } = await $eptAPI(API_ENDPOINTS.getMenu, {
	menu_code: "main_menu_en",
});

Also can be used in a function:

const { $eptAPI } = useNuxtApp(); // get the plugin instance
const { data, execute } = await $eptAPI(
	API_ENDPOINTS.getMenu,
	{
		menu_code: 'main_menu_en',
	},
	false // immediate = false
);

// Declare the execution
const getMenu = async () => {
	console.log("call menu sendPostRequest");
	await execute();

	if (data.value?.success) {
		menuItems.value = data.value.menu_items;
	}
};
// then call it to render in the client side as follows:
getMenu();

// or call it in useAsyncData to render in server-side:
await useAsyncData("initMenu", () => getMenu());

[metkm]

I don't think you should call useFetch inside a function https://www.youtube.com/watch?v=njsGVmcWviY

[KhaledOmara]

This is a plugin, so you safely call in the plugin function.
Also when calling the plugin function $eptAPI I've set the immediate as false, then called the execute in my function conditionally.

It's working perfectly in my project without any errors or warnings.

[cjpearson]

@metkm has a good point. Since $eptAPI wraps useFetch, it can only be called in places where useFetch can also be called. This works fine in your example when you call it right below useNuxtApp.

Although it works in this case, this approach looks risky to me. $eptAPI has all the usage restrictions of a composable, but because it is not named like a composable (e.g. useEptAPI) that may not be obvious to users of the plugin.

[hmuyin]

It has become so difficult to use

[hmuyin]

I use him this way now, which seems quite perfect. When hydrating, he still uses useFetch, otherwise he will use $Fetch

myReq.ts

export const useFetchSelf = (
url: string,
method: 'GET' | 'POST',
param?: object
) => new Promise((resolve, reject) => {
const nuxtApp = useNuxtApp()
const hydrating = process.client && !nuxtApp.isHydrating
const catchHandle = (error: any) => {
const errText = error.statusCode === 401 || error.statusCode === 403 ? error.data : error.statusMessage
const tipText = error.statusCode === 401 || error.statusCode === 403 ? '错误' : '请求错误'
const errHtml = error.statusCode !== 403 ? <div class="reqAlert"><p>${errText}</p><p class="url">${url}</p></div> : <div class="reqAlert"><p>${errText}</p></div>
usePlayTipsSound(4)
ElMessageBox.alert(
errHtml,
${tipText} - ${error.statusCode},
{ icon: 'CircleCloseFilled', confirmButtonText: '确定', dangerouslyUseHTMLString: true }
)
error.statusCode === 401 && (location.href = '/manage')
reject(error)
}
if (hydrating) {
$fetch(url, {
watch: false,
method: method,
immediate: true,
...method == 'POST' ? { body: param } : { param: param }
}).then(res => {
resolve(res)
}).catch(error => {
catchHandle(error)
})
}
else {
useFetch(url, {
watch: false,
method: method,
immediate: true,
...method == 'POST' ? { body: param } : { param: param },
}).then(({ data, error, pending, status }) => {
if (!error.value) resolve(data.value)
else throw error
}).catch(err => {
const error = err.value
catchHandle(error)
})
}
})
export const useFetchPost = (url: string, param?: object) => useFetchSelf(url, 'POST', param)
export const useFetchGet = (url: string, param?: object) => useFetchSelf(url, 'GET', param)

index.vue

const { sysset } = await useFetchPost('/api/test')
console.log(sysset)

const login = () => {
const aaa = await useFetchPost('/api/test')
console.log(aaa)
}

const login2 = () => {
useFetchPost('/api/test')
.then((aaa) => {
console.log(aaa)
})
.catch(err => null)
}

<el-button type="primary" size="default" @click="form.login">Login