refactor: 文档资料页的API重构

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',
+        locale: locale,
-          {
+      }
-            file: ['id', 'filesize', 'filename_download'],
-          },
-          {
-            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/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/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(() => {