refactor: 调整首页数据获取API
- 将首页的数据获取由REST重构为GraphQL
This commit is contained in:
@ -1,4 +1,4 @@
|
|||||||
import { readSingleton } from '@directus/sdk';
|
import GetHomepage from '@/graphql/homepage.graphql?raw';
|
||||||
|
|
||||||
export const useHomepage = () => {
|
export const useHomepage = () => {
|
||||||
const { $directus } = useNuxtApp();
|
const { $directus } = useNuxtApp();
|
||||||
@ -6,49 +6,8 @@ export const useHomepage = () => {
|
|||||||
const locale = getDirectusLocale();
|
const locale = getDirectusLocale();
|
||||||
|
|
||||||
return useAsyncData(`homepage-${locale}`, async () => {
|
return useAsyncData(`homepage-${locale}`, async () => {
|
||||||
return await $directus.request(
|
return await $directus.query<{ homepage: Homepage }>(GetHomepage, {
|
||||||
readSingleton('homepage', {
|
locale: locale,
|
||||||
fields: [
|
});
|
||||||
'id',
|
|
||||||
{
|
|
||||||
carousel: ['id', 'directus_files_id'],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
recommend_products: [
|
|
||||||
'id',
|
|
||||||
{
|
|
||||||
translations: ['id', 'name', 'summary'],
|
|
||||||
},
|
|
||||||
'cover',
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
recommend_solutions: [
|
|
||||||
'id',
|
|
||||||
{
|
|
||||||
translations: ['id', 'title', 'summary'],
|
|
||||||
},
|
|
||||||
'cover',
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
deep: {
|
|
||||||
recommend_products: {
|
|
||||||
translations: {
|
|
||||||
_filter: {
|
|
||||||
languages_code: { _eq: locale },
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
recommend_solutions: {
|
|
||||||
translations: {
|
|
||||||
_filter: {
|
|
||||||
languages_code: { _eq: locale },
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
})
|
|
||||||
);
|
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|||||||
33
app/graphql/homepage.graphql
Normal file
33
app/graphql/homepage.graphql
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
query GetHomepage($locale: String!) {
|
||||||
|
homepage {
|
||||||
|
id
|
||||||
|
carousel {
|
||||||
|
id
|
||||||
|
directus_files_id {
|
||||||
|
id
|
||||||
|
}
|
||||||
|
}
|
||||||
|
recommend_products {
|
||||||
|
id
|
||||||
|
translations(filter: { languages_code: { code: { _eq: $locale } } }) {
|
||||||
|
id
|
||||||
|
name
|
||||||
|
summary
|
||||||
|
}
|
||||||
|
cover {
|
||||||
|
id
|
||||||
|
}
|
||||||
|
}
|
||||||
|
recommend_solutions {
|
||||||
|
id
|
||||||
|
translations(filter: { languages_code: { code: { _eq: $locale } } }) {
|
||||||
|
id
|
||||||
|
title
|
||||||
|
summary
|
||||||
|
}
|
||||||
|
cover {
|
||||||
|
id
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -11,7 +11,8 @@ export function toHomepageView(raw: Homepage): HomepageView {
|
|||||||
const carousel = (raw.carousel ?? [])
|
const carousel = (raw.carousel ?? [])
|
||||||
.filter(isObject<HomepageFile>)
|
.filter(isObject<HomepageFile>)
|
||||||
.map((item) => item.directus_files_id)
|
.map((item) => item.directus_files_id)
|
||||||
.filter((item) => typeof item === 'string');
|
.filter(isObject<DirectusFile>)
|
||||||
|
.map((file) => file.id);
|
||||||
|
|
||||||
const products = (raw.recommend_products ?? [])
|
const products = (raw.recommend_products ?? [])
|
||||||
.filter(isObject<Product>)
|
.filter(isObject<Product>)
|
||||||
|
|||||||
@ -16,7 +16,7 @@
|
|||||||
const { data, pending, error } = await useHomepage();
|
const { data, pending, error } = await useHomepage();
|
||||||
|
|
||||||
const homepageData = computed(() => {
|
const homepageData = computed(() => {
|
||||||
return toHomepageView(data.value);
|
return toHomepageView(data.value.homepage);
|
||||||
});
|
});
|
||||||
|
|
||||||
const pageTilte = $t('page-title.homepage');
|
const pageTilte = $t('page-title.homepage');
|
||||||
|
|||||||
Reference in New Issue
Block a user