refactor: 关于我们页的API重构

- 将首页的数据获取由REST重构为GraphQL

app/composables/directus/useCompanyProfile.ts

@@ -1,4 +1,4 @@
-import { readSingleton } from '@directus/sdk';
+import GetCompanyProfile from '@/graphql/companyProfile.graphql?raw';
 
 export const useCompanyProfile = () => {
   const { $directus } = useNuxtApp();
@@ -6,24 +6,11 @@ export const useCompanyProfile = () => {
   const locale = getDirectusLocale();
 
   return useAsyncData(`company-profile-${locale}`, async () => {
-    return await $directus.request(
+    return await $directus.query<{ company_profile: CompanyProfile }>(
-      readSingleton('company_profile', {
+      GetCompanyProfile,
-        fields: [
-          'id',
       {
-            translations: ['id', 'content'],
+        locale: locale,
-          },
+      }
-        ],
-        deep: {
-          translations: {
-            _filter: {
-              languages_code: {
-                _eq: locale,
-              },
-            },
-          },
-        },
-      })
     );
   });
 };

app/composables/directus/useContactInfo.ts

@@ -1,4 +1,4 @@
-import { readSingleton } from '@directus/sdk';
+import GetContactInfo from '@/graphql/contactInfo.graphql?raw';
 
 export const useContactInfo = () => {
   const { $directus } = useNuxtApp();
@@ -6,24 +6,11 @@ export const useContactInfo = () => {
   const locale = getDirectusLocale();
 
   return useAsyncData(`contact-info-${locale}`, async () => {
-    return await $directus.request(
+    return await $directus.query<{ contact_info: ContactInfo }>(
-      readSingleton('contact_info', {
+      GetContactInfo,
-        fields: [
-          'id',
       {
-            translations: ['id', 'content'],
+        locale: locale,
-          },
+      }
-        ],
-        deep: {
-          translations: {
-            _filter: {
-              languages_code: {
-                _eq: locale,
-              },
-            },
-          },
-        },
-      })
     );
   });
 };

app/composables/directus/useDocumentList.ts

@@ -1,4 +1,4 @@
-import { readItems } from '@directus/sdk';
+import GetDocumentList from '@/graphql/documentList.graphql?raw';
 
 export const useDocumentList = () => {
   const { $directus } = useNuxtApp();
@@ -6,62 +6,11 @@ export const useDocumentList = () => {
   const locale = getDirectusLocale();
 
   return useAsyncData(`document-list-${locale}`, async () => {
-    return await $directus.request(
+    return await $directus.query<{ product_documents: ProductDocument[] }>(
-      readItems('product_documents', {
+      GetDocumentList,
-        fields: [
-          'id',
       {
-            file: ['id', 'filesize', 'filename_download'],
+        locale: locale,
-          },
+      }
-          {
-            translations: ['id', 'title'],
-          },
-          {
-            products: [
-              'id',
-              {
-                products_id: [
-                  'id',
-                  {
-                    translations: ['id', 'name'],
-                  },
-                  {
-                    product_type: [
-                      'id',
-                      {
-                        translations: ['id', 'name'],
-                      },
-                    ],
-                  },
-                ],
-              },
-            ],
-          },
-        ],
-        deep: {
-          translations: {
-            _filter: {
-              languages_code: { _eq: locale },
-            },
-          },
-          products: {
-            products_id: {
-              translations: {
-                _filter: {
-                  languages_code: { _eq: locale },
-                },
-              },
-              product_type: {
-                translations: {
-                  _filter: {
-                    languages_code: { _eq: locale },
-                  },
-                },
-              },
-            },
-          },
-        },
-      })
     );
   });
 };

app/composables/directus/useHomepage.ts

@@ -1,4 +1,4 @@
-import { readSingleton } from '@directus/sdk';
+import GetHomepage from '@/graphql/homepage.graphql?raw';
 
 export const useHomepage = () => {
   const { $directus } = useNuxtApp();
@@ -6,49 +6,8 @@ export const useHomepage = () => {
   const locale = getDirectusLocale();
 
   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 },
-              },
-            },
-          },
-        },
-      })
-    );
   });
 };

app/composables/directus/useProduct.ts

@@ -1,5 +1,4 @@
-import GetProduct from '@/graphql/product.graphql';
+import GetProduct from '@/graphql/product.graphql?raw';
-import { print } from 'graphql';
 
 export const useProduct = (id: string) => {
   const { $directus } = useNuxtApp();
@@ -8,13 +7,10 @@ export const useProduct = (id: string) => {
   const locale = getDirectusLocale();
 
   return useAsyncData(`product-${id}-${locale}`, async () => {
-    return await $directus.query<{ products_by_id: Product }>(
+    return await $directus.query<{ products_by_id: Product }>(GetProduct, {
-      print(GetProduct),
-      {
       id: id,
       locale: locale,
-      }
+    });
-    );
     // return await $directus.request(
     //   readItem('products', id, {
     //     fields: [

app/composables/directus/useProductList.ts

@@ -1,5 +1,4 @@
-import GetProductList from '@/graphql/productList.graphql';
+import GetProductList from '@/graphql/productList.graphql?raw';
-import { print } from 'graphql';
 
 export const useProductList = () => {
   const { $directus } = useNuxtApp();
@@ -8,11 +7,8 @@ export const useProductList = () => {
   const locale = getDirectusLocale();
 
   return useAsyncData(`product-list-${locale}`, async () => {
-    return await $directus.query<{ products: Product[] }>(
+    return await $directus.query<{ products: Product[] }>(GetProductList, {
-      print(GetProductList),
-      {
       locale: locale,
-      }
+    });
-    );
   });
 };

app/composables/directus/useQuestionList.ts

@@ -1,4 +1,4 @@
-import { readItems } from '@directus/sdk';
+import GetQuestionList from '@/graphql/questionList.graphql?raw';
 
 export const useQuestionList = () => {
   const { $directus } = useNuxtApp();
@@ -7,57 +7,8 @@ export const useQuestionList = () => {
   const locale = getDirectusLocale();
 
   return useAsyncData(`question-list-${locale}`, async () => {
-    return await $directus.request(
+    return await $directus.query<{ questions: Question[] }>(GetQuestionList, {
-      readItems('questions', {
+      locale: locale,
-        fields: [
+    });
-          'id',
-          {
-            translations: ['*'],
-          },
-          {
-            products: [
-              'id',
-              {
-                products_id: [
-                  'id',
-                  {
-                    product_type: [
-                      'id',
-                      {
-                        translations: ['id', 'name'],
-                      },
-                    ],
-                  },
-                  { translations: ['id', 'name'] },
-                ],
-              },
-            ],
-          },
-        ],
-        deep: {
-          translations: {
-            _filter: {
-              languages_code: { _eq: locale },
-            },
-          },
-          products: {
-            products_id: {
-              product_type: {
-                translations: {
-                  _filter: {
-                    languages_code: { _eq: locale },
-                  },
-                },
-              },
-              translations: {
-                _filter: {
-                  languages_code: { _eq: locale },
-                },
-              },
-            },
-          },
-        },
-      })
-    );
   });
 };

app/composables/directus/useSolution.ts

@@ -1,4 +1,4 @@
-import { readItem } from '@directus/sdk';
+import GetSolution from '@/graphql/solution.graphql?raw';
 
 export const useSolution = (id: string) => {
   const { $directus } = useNuxtApp();
@@ -6,23 +6,9 @@ export const useSolution = (id: string) => {
   const locale = getDirectusLocale();
 
   return useAsyncData(`solution-${id}-${locale}`, async () => {
-    return await $directus.request(
+    return await $directus.query<{ solutions_by_id: Solution }>(GetSolution, {
-      readItem('solutions', id, {
+      id: id,
-        fields: [
+      locale: locale,
-          'id',
+    });
-          {
-            translations: ['*'],
-          },
-          'create_at',
-        ],
-        deep: {
-          translations: {
-            _filter: {
-              languages_code: { _eq: locale },
-            },
-          },
-        },
-      })
-    );
   });
 };

app/composables/directus/useSolutionList.ts

@@ -1,4 +1,4 @@
-import { readItems } from '@directus/sdk';
+import GetSolutionList from '@/graphql/solutionList.graphql?raw';
 
 export const useSolutionList = () => {
   const { $directus } = useNuxtApp();
@@ -6,33 +6,8 @@ export const useSolutionList = () => {
   const locale = getDirectusLocale();
 
   return useAsyncData(`solution-list-${locale}`, async () => {
-    return await $directus.request(
+    return await $directus.query<{ solutions: Solution[] }>(GetSolutionList, {
-      readItems('solutions', {
+      locale: locale,
-        fields: [
+    });
-          'id',
-          'cover',
-          {
-            type: ['id', { translations: ['id', 'name'] }, 'sort'],
-          },
-          {
-            translations: ['id', 'title', 'summary'],
-          },
-        ],
-        deep: {
-          type: {
-            translations: {
-              _filter: {
-                languages_code: { _eq: locale },
-              },
-            },
-          },
-          translations: {
-            _filter: {
-              languages_code: { _eq: locale },
-            },
-          },
-        },
-      })
-    );
   });
 };

app/graphql/companyProfile.graphql

@@ -0,0 +1,9 @@
+query GetCompanyProfile($locale: String!) {
+  company_profile {
+    id
+    translations(filter: { languages_code: { code: { _eq: $locale } } }) {
+      id
+      content
+    }
+  }
+}

app/graphql/contactInfo.graphql

@@ -0,0 +1,9 @@
+query GetContactInfo($locale: String!) {
+  contact_info {
+    id
+    translations(filter: { languages_code: { code: { _eq: $locale } } }) {
+      id
+      content
+    }
+  }
+}

app/graphql/documentList.graphql

@@ -0,0 +1,31 @@
+query GetDocumentList($locale: String!) {
+  product_documents {
+    id
+    file {
+      id
+      filesize
+      filename_download
+    }
+    translations(filter: { languages_code: { code: { _eq: $locale } } }) {
+      id
+      title
+    }
+    products {
+      id
+      products_id {
+        id
+        translations(filter: { languages_code: { code: { _eq: $locale } } }) {
+          id
+          name
+        }
+        product_type {
+          id
+          translations(filter: { languages_code: { code: { _eq: $locale } } }) {
+            id
+            name
+          }
+        }
+      }
+    }
+  }
+}

app/graphql/homepage.graphql

@@ -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
+      }
+    }
+  }
+}

app/graphql/product.graphql

@@ -63,4 +63,3 @@ query GetProduct($id: ID!, $locale: String!) {
     }
   }
 }
-

app/graphql/questionList.graphql

@@ -0,0 +1,27 @@
+query GetQuestionList($locale: String!) {
+  questions {
+    id
+    translations(filter: { languages_code: { code: { _eq: $locale } } }) {
+      id
+      title
+      content
+    }
+    products {
+      id
+      products_id {
+        id
+        product_type {
+          id
+          translations(filter: { languages_code: { code: { _eq: $locale } } }) {
+            id
+            name
+          }
+        }
+        translations(filter: { languages_code: { code: { _eq: $locale } } }) {
+          id
+          name
+        }
+      }
+    }
+  }
+}

app/graphql/solution.graphql

@@ -0,0 +1,12 @@
+query GetSolution($id: ID!, $locale: String!) {
+  solutions_by_id(id: $id) {
+    id
+    translations(filter: { languages_code: { code: { _eq: $locale } } }) {
+      id
+      title
+      summary
+      content
+    }
+    create_at
+  }
+}

app/graphql/solutionList.graphql

@@ -0,0 +1,21 @@
+query GetSolutionList($locale: String!) {
+  solutions {
+    id
+    cover {
+      id
+    }
+    type {
+      id
+      translations(filter: { languages_code: { code: { _eq: $locale } } }) {
+        id
+        name
+      }
+      sort
+    }
+    translations(filter: { languages_code: { code: { _eq: $locale } } }) {
+      id
+      title
+      summary
+    }
+  }
+}

app/models/mappers/homepageMapper.test.ts

@@ -8,8 +8,18 @@ describe('toHomepageView', () => {
     const rawData: Homepage = {
       id: 1,
       carousel: [
-        { id: 1, directus_files_id: 'file-uuid-1' },
+        {
-        { id: 2, directus_files_id: 'file-uuid-2' },
+          id: 1,
+          directus_files_id: {
+            id: 'file-uuid-1',
+          },
+        },
+        {
+          id: 2,
+          directus_files_id: {
+            id: 'file-uuid-2',
+          },
+        },
       ],
       recommend_products: [
         {

app/models/mappers/homepageMapper.ts

@@ -11,7 +11,8 @@ export function toHomepageView(raw: Homepage): HomepageView {
   const carousel = (raw.carousel ?? [])
     .filter(isObject<HomepageFile>)
     .map((item) => item.directus_files_id)
-    .filter((item) => typeof item === 'string');
+    .filter(isObject<DirectusFile>)
+    .map((file) => file.id);
 
   const products = (raw.recommend_products ?? [])
     .filter(isObject<Product>)

app/pages/about/index.vue

@@ -34,7 +34,9 @@
   ];
   const { data, pending, error } = await useCompanyProfile();
 
-  const content = computed(() => toCompanyProfileView(data.value));
+  const content = computed(() =>
+    toCompanyProfileView(data.value.company_profile)
+  );
 
   watch(error, (value) => {
     if (value) {

app/pages/index.vue

@@ -16,7 +16,7 @@
   const { data, pending, error } = await useHomepage();
 
   const homepageData = computed(() => {
-    return toHomepageView(data.value);
+    return toHomepageView(data.value.homepage);
   });
 
   const pageTilte = $t('page-title.homepage');

app/pages/solutions/[slug].vue

@@ -26,16 +26,16 @@
   const route = useRoute();
   const localePath = useLocalePath();
 
-  // 获取路由参数(documentId)
+  // 获取路由参数
-  const id = computed(() => route.params.slug as string);
+  const id = route.params.slug as string;
 
-  const { data, pending, error } = await useSolution(id.value);
+  const { data, pending, error } = await useSolution(id);
 
   const solution = computed(() => {
     if (!data.value) {
       return null;
     }
-    return toSolutionView(data.value);
+    return toSolutionView(data.value.solutions_by_id);
   });
 
   const breadcrumbItems = computed(() => [

app/pages/solutions/index.vue

@@ -54,7 +54,7 @@
 
   const { data, pending, error } = await useSolutionList();
 
-  const solutionsRaw = computed(() => data.value ?? []);
+  const solutionsRaw = computed(() => data.value.solutions ?? []);
   const solutions = computed(() =>
     solutionsRaw.value.map((item) => toSolutionListView(item))
   );

app/pages/support/contact-us.vue

@@ -24,7 +24,7 @@
   ];
   const { data, pending, error } = await useContactInfo();
 
-  const content = computed(() => toContactInfoView(data.value));
+  const content = computed(() => toContactInfoView(data.value.contact_info));
 
   watch(error, (value) => {
     if (value) {

app/pages/support/documents.vue

@@ -38,7 +38,9 @@
   const { data, pending, error } = await useDocumentList();
 
   const documents = computed(
-    () => data?.value.map((item) => toDocumentListView(item)) ?? []
+    () =>
+      data?.value.product_documents.map((item) => toDocumentListView(item)) ??
+      []
   );
 
   const productTypeOptions = computed(() => {

app/pages/support/faq.vue

@@ -41,7 +41,7 @@
   const { data, pending, error } = await useQuestionList();
 
   const questions = computed(
-    () => data.value.map((item) => toQuestionListView(item)) ?? null
+    () => data.value.questions.map((item) => toQuestionListView(item)) ?? null
   );
 
   const productTypeOptions = computed(() => {