If I useCustomFetch on onMounted and I reload the page, the error ‘Hydration completed but contains mismatches.’ appear. But, if I was redirect to the page, the useCustomFetch works correctly without error.
// useCustomFetch.ts
import { useFetch } from '#app';
export async function useCustomFetch(url: string, options: any, showLoading: boolean = false) {
if (!process.server) {
console.log("Not Server side called APIs");
}
console.log("called APIs");
if (typeof window === 'undefined') return;
console.log("Start APIs");
try {
const { data, error } = await useFetch(url, options);
if (showLoading) {
console.log("Showing loading...");
}
if (showLoading) {
console.log("Closing loading...");
}
const response = data.value;
const responseError = error.value;
if (responseError) {
console.error("Fetch error: ", responseError);
return null;
}
return response;
} catch (err) {
console.error("Error in useCustomFetch:", err);
throw err;
}
}
And this is the print out from the browser:
browser.mjs:44 Not Server side called APIs
browser.mjs:44 called APIs
browser.mjs:44 Start APIs
browser.mjs:44 error Hydration completed but contains mismatches.
log @ browser.mjs:44
_log @ core.mjs:381
resolveLog @ core.mjs:349
_logFn @ core.mjs:377
(anonymous) @ core.mjs:306
hydrate2 @ runtime-core.esm-bundler.js:4641
mount @ runtime-core.esm-bundler.js:3919
app.mount @ runtime-dom.esm-bundler.js:1530
initApp @ entry.js:56
await in initApp (async)
(anonymous) @ entry.js:67
Show 5 more frames
Show less
browser.mjs:44 Showing loading...
browser.mjs:44 Closing loading...
This is the page i useCustomFetch, and i already ensure it is called on client-side.
// some page/xxx.vue
const getInventoryData = async () => {
try {
inventoryData.value = await useCustomFetch('/api/inventory/', {
method: 'GET',
}, true);
} catch (err: any) {
error.value = err;
} finally {
loading.value = false;
}
};
onMounted(() => {
getInventoryData();
});
Why i need to use custom fetch is i want to have loading popup and other notification during the APIs calls and APIs result. Otherwise I need to copy and paste all the setting on each single useFetch.