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(
-      readSingleton('contact_info', {
-        fields: [
-          'id',
-          {
-            translations: ['id', 'content'],
-          },
-        ],
-        deep: {
-          translations: {
-            _filter: {
-              languages_code: {
-                _eq: locale,
-              },
-            },
-          },
-        },
-      })
+    return await $directus.query<{ contact_info: ContactInfo }>(
+      GetContactInfo,
+      {
+        locale: locale,
+      }
     );
   });
 };

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/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) {