Chore/graphql fragments

netlify.toml

@@ -1,8 +1,7 @@
 [build]
-command = "npm run build"
+command = "NODE_ENV=production npm run build"
 
 [build.environment]
-NODE_ENV = "production"
 NPM_CONFIG_AUDIT = "false"
 NPM_CONFIG_FUND = "false"
 NPM_FLAGS = "--ignore-scripts"

nuxt.config.ts

@@ -1,5 +1,6 @@
 import { defineNuxtConfig } from 'nuxt/config';
 import { writeFile, mkdir } from 'node:fs/promises';
+import graphqlLoader from 'vite-plugin-graphql-loader'
 import { default as nuxtIcons } from 'nuxt-icons';
 import { default as plausible } from '@nuxtjs/plausible';
 import { fetchTranslations } from './src/scripts/fetch-translations';
@@ -17,6 +18,12 @@ export default defineNuxtConfig({
     '@/components/app-core/index.css',
   ],
   nitro: {
+    esbuild: {
+      options: {
+        // allow graphql loader to use async/await in root
+        target: 'esnext',
+      }
+    },
     prerender: {
       crawlLinks: false
     }
@@ -65,6 +72,15 @@ export default defineNuxtConfig({
         }),
     ])
       // hook expects a promise with no return data
-      .then(() => {}),
+      .then(() => { }),
   },
+  vite: {
+    build: {
+      // allow graphql loader to use async/await in root
+      target: 'esnext',
+    },
+    plugins: [
+      graphqlLoader()
+    ]
+  }
 });

package.json

@@ -14,6 +14,7 @@
     "datocms-listen": "^0.1.14",
     "datocms-structured-text-utils": "^2.0.4",
     "dayjs": "^1.11.7",
+    "graphql": "^16.6.0",
     "nuxt": "^3.4.3",
     "nuxt-icons": "^3.2.1",
     "prismjs": "^1.29.0",
@@ -27,7 +28,8 @@
     "eslint": "^8.39.0",
     "eslint-plugin-vue": "^9.12.0",
     "husky": "^8.0.3",
-    "nano-staged": "^0.8.0"
+    "nano-staged": "^0.8.0",
+    "vite-plugin-graphql-loader": "^2.0.0"
   },
   "engines": {
     "node": ">=18"

src/components/image-card-grid/image-card-grid.fragment.graphql

@@ -0,0 +1,13 @@
+fragment ImageCardGridFragment on SectionImageCardGridRecord {
+  title
+  items {
+    id
+    title
+    body {
+      value
+    }
+    image {
+      ...image
+    }
+  }
+}

src/composables/useFetchContent.js

@@ -1,7 +1,9 @@
+import { print } from 'graphql/language/printer';
 import { datocmsFetch } from '../lib/datocms-fetch.ts';
 import { datocmsEnvironment } from '../constants.mjs';
 
-export async function useFetchContent({ key = null, query, variables }) {
+export async function useFetchContent({ key = null, query: queryDocument, variables }) {
+  const query = print(queryDocument)
   const runtimeConfig = useRuntimeConfig();
   const route = useRoute();
   const data = ref(null);

src/error.vue

@@ -18,7 +18,7 @@
 
 <script setup>
   const { $i18n } = useNuxtApp();
-  import query from './error.query.graphql?raw';
+  import query from './error.query.graphql';
 
   const { data } = await useFetchContent({
     key: 'ErrorPage',

src/layouts/default.vue

@@ -44,7 +44,7 @@
 
 <script setup>
   const { $i18n } = useNuxtApp();
-  import query from './default.query.graphql?raw';
+  import query from './default.query.graphql';
   const { afterEach } = useRouter();
   const skipLink = ref(null);
   const mobileMenuIsOpen = ref(false);

src/pages/[language]/[slug]/index.query.graphql

@@ -1,3 +1,5 @@
+# import '../../../components/image-card-grid/image-card-grid.fragment.graphql'
+
 query LandingPage($locale: SiteLocale, $slug: String) {
   page: landingPage(locale: $locale, filter: {slug: {eq: $slug}}) {
     title
@@ -101,17 +103,7 @@ query LandingPage($locale: SiteLocale, $slug: String) {
         }
       }
       ... on SectionImageCardGridRecord {
-        title
-        items {
-          id
-          title
-          body {
-            value
-          }
-          image {
-            ...image
-          }
-        }
+        ...ImageCardGridFragment
       }
       ... on SectionJobsListRecord {
         id

src/pages/[language]/[slug]/index.vue

@@ -76,7 +76,7 @@
 </template>
 
 <script setup>
-  import query from './index.query.graphql?raw';
+  import query from './index.query.graphql';
 
   const { params } = useRoute();
   const { data } = await useFetchContent({

src/pages/[language]/about-us/index.vue

@@ -84,7 +84,7 @@
 </template>
 
 <script setup>
-  import query from './index.query.graphql?raw';
+  import query from './index.query.graphql';
   const { params } = useRoute();
 
   const { data } = await useFetchContent({
@@ -277,4 +277,4 @@
       margin-right: var(--spacing-medium);
     }
   }
-</style>
+</style>

src/pages/[language]/blog/[slug]/index.vue

@@ -169,7 +169,7 @@
 </template>
 
 <script setup>
-  import query from './index.query.graphql?raw';
+  import query from './index.query.graphql';
   import prismjs from 'prismjs';
   import('prismjs/components/prism-graphql');
   import('prismjs/components/prism-rust');

src/pages/[language]/blog/page/[page].vue

@@ -70,7 +70,7 @@
 </template>
 
 <script setup>
-  import query from './index.query.graphql?raw';
+  import query from './index.query.graphql';
 
   // If you change this, also change it in fetch-routes.ts
   const PER_PAGE = 20;

src/pages/[language]/cases/[slug]/index.vue

@@ -153,7 +153,7 @@
 </template>
 
 <script setup>
-  import query from './index.query.graphql?raw';
+  import query from './index.query.graphql';
 
   const { params } = useRoute();
 

src/pages/[language]/cases/index.vue

@@ -72,7 +72,7 @@
 </template>
 
 <script setup>
-  import query from './index.query.graphql?raw';
+  import query from './index.query.graphql';
 
   const { params } = useRoute();
 

src/pages/[language]/contact/[slug]/index.vue

@@ -23,7 +23,7 @@
 </template>
 
 <script setup>
-  import query from './index.query.graphql?raw';
+  import query from './index.query.graphql';
 
   const { params } = useRoute();
   const { data } = await useFetchContent({

src/pages/[language]/contact/index.vue

@@ -84,7 +84,7 @@
 </template>
 
 <script setup>
- import query from './index.query.graphql?raw';
+ import query from './index.query.graphql';
 
   const { params } = useRoute();
   const { data } = await useFetchContent({

src/pages/[language]/energy-first/index.vue

@@ -475,7 +475,7 @@
 </template>
 
 <script setup>
-  import query from './index.query.graphql?raw';
+  import query from './index.query.graphql';
 
   const { params } = useRoute();
 

src/pages/[language]/events/[slug]/index.vue

@@ -128,7 +128,7 @@
 </template>
 
 <script setup>
-  import query from './index.query.graphql?raw';
+  import query from './index.query.graphql';
   import formatDate from '../../../../lib/format-date';
 
   const { params } = useRoute();

src/pages/[language]/events/index.vue

@@ -64,7 +64,7 @@
 </template>
 
 <script setup>
-  import query from './index.query.graphql?raw';
+  import query from './index.query.graphql';
 
   const { params } = useRoute();
   const { data } = await useFetchContent({

src/pages/[language]/faq/index.vue

@@ -27,7 +27,7 @@
 </template>
 
 <script setup>
-  import query from './index.query.graphql?raw';
+  import query from './index.query.graphql';
 
   const { params } = useRoute();
 

src/pages/[language]/index.vue

@@ -104,7 +104,7 @@
 </template>
 
 <script setup>
-  import query from './index.query.graphql?raw';
+  import query from './index.query.graphql';
   import getSelfTypingTextInterval from '~/lib/get-self-typing-text-interval'
 
   const { params } = useRoute();

src/pages/[language]/jobs/[slug]/index.vue

@@ -48,7 +48,7 @@
 </template>
 
 <script setup>
-  import query from './index.query.graphql?raw';
+  import query from './index.query.graphql';
 
   const { params } = useRoute();
 

src/pages/[language]/jobs/index.vue

@@ -21,7 +21,7 @@
 </template>
 
 <script setup>
-  import query from './index.query.graphql?raw';
+  import query from './index.query.graphql';
 
   const { params } = useRoute();
 

src/pages/[language]/lustrum/index.vue

@@ -80,7 +80,7 @@
 </template>
 
 <script setup>
-  import query from './index.query.graphql?raw';
+  import query from './index.query.graphql';
 
   const { params } = useRoute();
 

src/pages/[language]/services/[slug]/index.vue

@@ -63,7 +63,7 @@
 </template>
 
 <script setup>
-  import query from './index.query.graphql?raw';
+  import query from './index.query.graphql';
   const { $localeUrl } = useNuxtApp();
 
   const { params } = useRoute();

src/pages/[language]/services/index.vue

@@ -62,7 +62,7 @@
 </template>
 
 <script setup>
-  import query from './index.query.graphql?raw';
+  import query from './index.query.graphql';
 
   const { params } = useRoute();
 

src/pages/[language]/team/[slug]/index.vue

@@ -69,8 +69,8 @@
 
 <script setup>
 import formatDate from '../../../../lib/format-date';
-import personQuery from './index.person.graphql?raw';
-import blogPostsQuery from './index.blogPosts.graphql?raw';
+import personQuery from './index.person.graphql';
+import blogPostsQuery from './index.blogPosts.graphql';
 
 const route = useRoute()
 

src/pages/[language]/work-at/index.vue

@@ -128,7 +128,7 @@
 </template>
 
 <script setup>
-  import query from './index.query.graphql?raw';
+  import query from './index.query.graphql';
 
   const { params } = useRoute();
   const { data } = await useFetchContent({