refactor: update to nuxt-graphql 0.5.x

wp-content/themes/moonshine/app/components/builder/BuilderSections.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { BuilderSectionsFragment } from "#graphql/typed-documents";
+import type { BuilderSectionsFragment } from "#graphql/fragments";
 
 const props = defineProps<BuilderSectionsFragment>();
 const sections = computed(() => {

wp-content/themes/moonshine/app/components/builder/LayoutContained.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { LayoutContainedFragment } from "#graphql/typed-documents";
+import type { LayoutContainedFragment } from "#graphql/fragments";
 import { tv, type VariantProps } from "tailwind-variants";
 
 const props = defineProps<LayoutContainedFragment>();

wp-content/themes/moonshine/app/components/nodes/NodePage.global.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { NodePageFragment } from "#graphql/typed-documents";
+import type { NodePageFragment } from "#graphql/fragments";
 
 defineProps<NodePageFragment>();
 </script>

wp-content/themes/moonshine/app/components/sections/SectionTextBlock.global.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { SectionTextBlockFragment } from "#graphql/typed-documents";
+import type { SectionTextBlockFragment } from "#graphql/fragments";
 
 defineProps<SectionTextBlockFragment>();
 </script>

wp-content/themes/moonshine/app/components/site/SiteFooterCopyright.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const { data } = await useGraphQLQuery("GeneralSettings", undefined, { cache: { ttl: 0 } });
+const { data } = await useAsyncGraphQLQuery("GeneralSettings", undefined, { cache: { ttl: 0 } });
 </script>
 
 <template>

wp-content/themes/moonshine/app/composables/useAuthConnexion.ts

@@ -28,7 +28,7 @@ export function useAuthConnexion() {
   async function login({ data: variables }: FormSubmitEvent<AuthLoginForm>, redirect?: string) {
     try {
       const { data } = await loginMutate(variables);
-      if (!data.login) {
+      if (!data?.login) {
         throw new Error(`Échec de la connexion par mot de passe.`);
       }
       await redirectTo(redirect);

wp-content/themes/moonshine/app/pages/[...uri].vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 const { path: uri } = useRoute();
-const { data } = await useGraphQLQuery("NodeByUri", { uri });
+const { data } = await useAsyncGraphQLQuery("NodeByUri", { uri });
 
 // Resolve and validate Node component
 if (!data.value.nodeByUri) {

wp-content/themes/moonshine/nuxt.config.ts

@@ -44,15 +44,16 @@ export default defineNuxtConfig({
   },
 
   graphql: {
-    context: "server/graphql/context.ts",
-    schemas: {
-      wp: {
-        type: "remote",
-        url: `${process.env.NUXT_WP_URL || "https://wp-headless.ledevsimple.ca"}/graphql`,
-        middleware: "server/graphql/wp-middleware.ts",
+    yoga: {
+      context: ["~~/server/graphql/context"],
+      schemas: {
+        wp: {
+          type: "remote",
+          url: `${process.env.NUXT_WP_URL || "https://wp-headless.ledevsimple.ca"}/graphql`,
+          hooks: ["~~/server/graphql/wp-hooks"],
+        },
       },
     },
-    saveSdl: "server/graphql/schema.graphql",
   },
 
   sitemap: {

wp-content/themes/moonshine/package.json

@@ -16,15 +16,15 @@
     "typecheck": "nuxt typecheck"
   },
   "dependencies": {
-    "@iconify-json/lucide": "^1.2.84",
-    "@lewebsimple/nuxt-graphql": "^0.4.0",
+    "@iconify-json/lucide": "^1.2.86",
+    "@lewebsimple/nuxt-graphql": "^0.5.2",
     "@nuxt/ui": "4.3.0",
     "@nuxtjs/seo": "^3.3.0",
     "jwt-decode": "^4.0.0",
     "nuxt": "^4.2.2",
     "nuxt-auth-utils": "^0.5.27",
     "tailwindcss": "^4.1.18",
-    "vue": "^3.5.26",
+    "vue": "^3.5.27",
     "vue-router": "^4.6.4",
     "zod": "^4.3.5"
   },
@@ -46,4 +46,4 @@
       "chore": false
     }
   }
-}
+}

wp-content/themes/moonshine/server/graphql/context.ts

@@ -1,11 +1,6 @@
-import { defineGraphQLContext } from "@lewebsimple/nuxt-graphql/helpers";
-import type { AuthLoginMutation } from "#graphql/typed-documents";
-
 export default defineGraphQLContext(async (event) => {
   const authToken = await getAuthToken(event);
-
   return {
     authToken,
-    handleLogin: async (loginData: AuthLoginMutation) => handleLogin(event, loginData),
   };
 });

wp-content/themes/moonshine/server/graphql/wp-hooks.ts

@@ -0,0 +1,11 @@
+export default defineRemoteExecutorHooks({
+  onRequest(request) {
+    if (request.context.authToken) {
+      request.extensions ??= {};
+      request.extensions.headers = {
+        ...request.extensions.headers,
+        Authorization: `Bearer ${request.context.authToken}`,
+      };
+    }
+  },
+});

wp-content/themes/moonshine/server/graphql/wp-middleware.ts

@@ -1,20 +0,0 @@
-import type { AuthLoginMutation } from "#build/graphql/typed-documents";
-import { defineRemoteExecMiddleware } from "@lewebsimple/nuxt-graphql/helpers";
-
-export default defineRemoteExecMiddleware({
-  onRequest({ context, fetchOptions }) {
-    // Attach auth token from context to request headers
-    if (context.authToken) {
-      fetchOptions.headers.set("Authorization", `Bearer ${context.authToken}`);
-    }
-  },
-  async onResponse({ operationName, response, context }) {
-    // Save auth token in user session
-    if (operationName === "AuthLogin") {
-      const { data } = await response.json() as { data?: AuthLoginMutation };
-      if (data) {
-        await context.handleLogin(data);
-      }
-    }
-  },
-});

wp-content/themes/moonshine/server/utils/auth.ts

@@ -2,10 +2,11 @@ import type { H3Event } from "h3";
 import { GraphQLClient } from "graphql-request";
 import { jwtDecode } from "jwt-decode";
 import type { User } from "#auth-utils";
-import { type AuthUserFragment, type AuthLoginMutation, AuthRefreshTokenDocument } from "#graphql/typed-documents";
+import type { AuthUserFragment } from "#graphql/fragments";
+import { AuthRefreshTokenDocument, type AuthLoginResult } from "#graphql/operations";
 
 // Handle login result and store user session
-export async function handleLogin(event: H3Event, loginData: AuthLoginMutation) {
+export async function handleLogin(event: H3Event, loginData: AuthLoginResult) {
   if (!loginData?.login) {
     return;
   }