diff --git a/.graphqlrc.yaml b/.graphqlrc.yaml
new file mode 100644
index 0000000..47690e9
--- /dev/null
+++ b/.graphqlrc.yaml
@@ -0,0 +1,5 @@
+schema:
+  - 'http://192.168.86.5:8055/graphql':
+      headers:
+        Authorization: 'Bearer ixSWeViHIqwj6_r7NM-uZVR3NNOyBa_W'
+documents: 'app/graphql/**/*.{graphql,js,ts,jsx,tsx}'
diff --git a/app/plugins/directus.ts b/app/plugins/directus.ts
index a68bc1b..5d82cee 100644
--- a/app/plugins/directus.ts
+++ b/app/plugins/directus.ts
@@ -1,10 +1,11 @@
-import { createDirectus, rest, staticToken } from '@directus/sdk';
+import { createDirectus, rest, staticToken, graphql } from '@directus/sdk';
 
 export default defineNuxtPlugin(() => {
   const config = useRuntimeConfig();
 
   const directus = createDirectus<Schema>(config.public.directus.url)
     .with(rest())
+    .with(graphql())
     .with(staticToken(config.public.directus.token || ''));
   return {
     provide: { directus },
diff --git a/nuxt.config.ts b/nuxt.config.ts
index d9ca413..74921a3 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,4 +1,6 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
+import GraphQLLoader from 'vite-plugin-graphql-loader';
+
 export default defineNuxtConfig({
   compatibilityDate: '2025-07-15',
   devtools: { enabled: true },
@@ -90,6 +92,7 @@ export default defineNuxtConfig({
         },
       },
     },
+    plugins: [GraphQLLoader()],
   },
 
   devServer: {
diff --git a/package.json b/package.json
index 00f7eb4..267ae90 100644
--- a/package.json
+++ b/package.json
@@ -25,12 +25,14 @@
     "dompurify": "^3.2.6",
     "element-plus": "^2.10.7",
     "fuse.js": "^7.1.0",
+    "graphql": "^16.12.0",
     "markdown-it": "^14.1.0",
     "meilisearch": "^0.53.0",
     "nuxt": "^4.0.3",
     "nuxt-directus": "5.7.0",
     "sass": "^1.90.0",
     "sharp": "^0.34.3",
+    "vite-plugin-graphql-loader": "^4.0.4",
     "vue": "^3.5.18",
     "vue-router": "^4.5.1"
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index eae14c2..7067bfe 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -50,6 +50,9 @@ importers:
       fuse.js:
         specifier: ^7.1.0
         version: 7.1.0
+      graphql:
+        specifier: ^16.12.0
+        version: 16.12.0
       markdown-it:
         specifier: ^14.1.0
         version: 14.1.0
@@ -68,6 +71,9 @@ importers:
       sharp:
         specifier: ^0.34.3
         version: 0.34.3
+      vite-plugin-graphql-loader:
+        specifier: ^4.0.4
+        version: 4.0.4
       vue:
         specifier: ^3.5.18
         version: 3.5.21(typescript@5.9.2)
@@ -3498,6 +3504,16 @@ packages:
   graphemer@1.4.0:
     resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
 
+  graphql-tag@2.12.6:
+    resolution: {integrity: sha512-FdSNcu2QQcWnM2VNvSCCDCVS5PpPqpzgFT8+GXzqJuoDd0CBncxCY278u4mhRO7tMgo2JjgJA5aZ+nWSQ/Z+xg==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      graphql: ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0
+
+  graphql@16.12.0:
+    resolution: {integrity: sha512-DKKrynuQRne0PNpEbzuEdHlYOMksHSUI8Zc9Unei5gTsMNA2/vMpoMz/yKba50pejK56qj98qM0SjYxAKi13gQ==}
+    engines: {node: ^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0}
+
   gzip-size@6.0.0:
     resolution: {integrity: sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==}
     engines: {node: '>=10'}
@@ -5388,6 +5404,9 @@ packages:
       vue-tsc:
         optional: true
 
+  vite-plugin-graphql-loader@4.0.4:
+    resolution: {integrity: sha512-lYnpQ2luV2fcuXmOJADljuktfMbDW00Y+6QS+Ek8Jz1Vdzlj/51LSGJwZqyjJ24a5YQ+o29Hr6el/5+nlZetvg==}
+
   vite-plugin-inspect@11.3.3:
     resolution: {integrity: sha512-u2eV5La99oHoYPHE6UvbwgEqKKOQGz86wMg40CCosP6q8BkB6e5xPneZfYagK4ojPJSj5anHCrnvC20DpwVdRA==}
     engines: {node: '>=14'}
@@ -9479,6 +9498,13 @@ snapshots:
 
   graphemer@1.4.0: {}
 
+  graphql-tag@2.12.6(graphql@16.12.0):
+    dependencies:
+      graphql: 16.12.0
+      tslib: 2.8.1
+
+  graphql@16.12.0: {}
+
   gzip-size@6.0.0:
     dependencies:
       duplexer: 0.1.2
@@ -11725,6 +11751,12 @@ snapshots:
       optionator: 0.9.4
       typescript: 5.9.2
 
+  vite-plugin-graphql-loader@4.0.4:
+    dependencies:
+      graphql: 16.12.0
+      graphql-tag: 2.12.6(graphql@16.12.0)
+      magic-string: 0.30.19
+
   vite-plugin-inspect@11.3.3(@nuxt/kit@3.19.2(magicast@0.3.5))(vite@7.1.5(@types/node@24.4.0)(jiti@2.5.1)(sass@1.92.1)(terser@5.44.0)(yaml@2.8.1)):
     dependencies:
       ansis: 4.1.0
diff --git a/shared/types/graphql.d.ts b/shared/types/graphql.d.ts
new file mode 100644
index 0000000..909ad9a
--- /dev/null
+++ b/shared/types/graphql.d.ts
@@ -0,0 +1,9 @@
+declare module '*.graphql' {
+  const Query: import('graphql').DocumentNode;
+  export default Query;
+  export const _queries: Record<string, import('graphql').DocumentNode>;
+  export const _fragments: Record<
+    string,
+    import('graphql').FragmentDefinitionNode
+  >;
+}