Is it possible to make the useAsyncData composable delay page rendering until the data is loaded
type UseBDRequest = {
param?: string;
key: string;
methodKey?:
| "page"
| "types"
| "type"
| "option"
| "options"
| "menu"
| "menus"
| "categories"
| "category"
| "assets"
| "asset";
setMeta?: boolean | null;
canredirect404?: boolean | null;
};
export const useBDRequest = ({
param = "",
key,
methodKey = "page",
setMeta = true,
canredirect404 = true,
}: UseBDRequest): { data: Ref<any>; pending: Ref<boolean>; error: Ref<any> } => {
const { $head, $api } = useNuxtApp();
// return useAsyncData(key, () => $api.mongomethodKey);
const { data, pending, error } = useAsyncData(key, () => $api.mongomethodKey);
watchEffect(() => {
if (setMeta && data.value?.success && data.value?.data) {
const {
meta_title = "",
meta_description = "",
meta_keywords = "",
meta_og = {},
name = "",
noindex = false,
nofollow = false,
canonical = "",
updated_at = "",
} = data.value.data;
useHead(
$head({
meta_title,
meta_description,
meta_keywords,
meta_image: meta_og?.["og:image"] data.value?.success === false)) {
navigateTo("/404");
}
});
return { data, pending, error };
};
param?: string;
key: string;
methodKey?:
| "page"
| "types"
| "type"
| "option"
| "options"
| "menu"
| "menus"
| "categories"
| "category"
| "assets"
| "asset";
setMeta?: boolean | null;
canredirect404?: boolean | null;
};
export const useBDRequest = ({
param = "",
key,
methodKey = "page",
setMeta = true,
canredirect404 = true,
}: UseBDRequest): { data: Ref<any>; pending: Ref<boolean>; error: Ref<any> } => {
const { $head, $api } = useNuxtApp();
// return useAsyncData(key, () => $api.mongomethodKey);
const { data, pending, error } = useAsyncData(key, () => $api.mongomethodKey);
watchEffect(() => {
if (setMeta && data.value?.success && data.value?.data) {
const {
meta_title = "",
meta_description = "",
meta_keywords = "",
meta_og = {},
name = "",
noindex = false,
nofollow = false,
canonical = "",
updated_at = "",
} = data.value.data;
useHead(
$head({
meta_title,
meta_description,
meta_keywords,
meta_image: meta_og?.["og:image"] data.value?.success === false)) {
navigateTo("/404");
}
});
return { data, pending, error };
};
