Features: 1) Integrate advanced Apollo link setup including error handling, authentication, and custom link chaining; 2) Replace apollo-upload-link.ts with revised client link configuration in apollo.ts; 3) Add @types/apollo-upload-client and @types/extract-files for enhanced TypeScript support;

Fixes: 1) Remove deprecated and redundant logic from `useAvatarUpload`; 2) Correct non-functional avatar upload and improve template handling in `settings.vue`;

Extra: 1) Cleanup unused imports, comments, and SCSS styles across files; 2) Simplify plugin configuration and migration to consolidated link logic; 3) Update package dependencies with precise resolution in `package-lock.json`.

storefront/composables/user/useAvatarUpload.ts

@@ -6,17 +6,11 @@ import {useNotification} from "~/composables/notification";
 export function useAvatarUpload() {
   const { t } = useI18n();
   const userStore = useUserStore();
-  const { mutate, onDone, loading, error } = useMutation<IAvatarUploadResponse>(
+  const { mutate, onDone, loading, error } = useMutation<IAvatarUploadResponse>(UPLOAD_AVATAR);
-    UPLOAD_AVATAR,
-    // {
-    //   context: { hasUpload: true }
-    // }
-  );
 
   async function uploadAvatar(event: Event) {
     const file = (event.target as HTMLInputElement).files?.[0];
     if (!file) return;
-    console.log(file)
 
     await mutate({ file });
   }

storefront/nuxt.config.ts

@@ -2,7 +2,6 @@ import { defineNuxtConfig } from 'nuxt/config';
 import { i18nConfig } from './config/i18n';
 import {fileURLToPath, URL} from "node:url";
 import { resolve } from 'node:path';
-import createUploadLink from "apollo-upload-client/createUploadLink.mjs";
 
 export default defineNuxtConfig({
   ssr: true,
@@ -93,20 +92,6 @@ export default defineNuxtConfig({
           file: resolve(__dirname, 'pages/index.vue')
         }
       )
-    },
+    }
-    // 'apollo:client:created'(apolloClient, { key }) {
-    //   console.log(key)
-    //   console.log('log')
-    //   if ( key !== 'default' ) return
-    //   const runtime = useRuntimeConfig()
-    //   const uploadLink = createUploadLink({
-    //     uri: `https://api.${runtime.public.evibesBaseDomain}/graphql/`,
-    //     credentials: 'include',
-    //     headers: {
-    //       'X-EVIBES-AUTH': useCookie(`${runtime.public.evibesProjectName?.toLowerCase()}-access`).value || ''
-    //     }
-    //   })
-    //   apolloClient.setLink(uploadLink)
-    // }
   }
 })

storefront/package-lock.json

@@ -32,6 +32,7 @@
       "devDependencies": {
         "@element-plus/nuxt": "^1.1.3",
         "@nuxtjs/apollo": "^5.0.0-alpha.14",
+        "@types/apollo-upload-client": "^18.0.0",
         "element-plus": "^2.10.1",
         "typescript": "^5.8.3",
         "vue-tsc": "^2.2.10"
@@ -2591,6 +2592,18 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/@types/apollo-upload-client": {
+      "version": "18.0.0",
+      "resolved": "https://registry.npmjs.org/@types/apollo-upload-client/-/apollo-upload-client-18.0.0.tgz",
+      "integrity": "sha512-cMgITNemktxasqvp6jiPj15dv84n3FTMvMoYBP1+xonDS+0l6JygIJrj2LJh85rShRzTOOkrElrAsCXXARa3KA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@apollo/client": "^3.8.0",
+        "@types/extract-files": "*",
+        "graphql": "14 - 16"
+      }
+    },
     "node_modules/@types/cookie": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
@@ -2603,6 +2616,13 @@
       "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
       "license": "MIT"
     },
+    "node_modules/@types/extract-files": {
+      "version": "13.0.1",
+      "resolved": "https://registry.npmjs.org/@types/extract-files/-/extract-files-13.0.1.tgz",
+      "integrity": "sha512-/fRbzc2lAd7jDJSSnxWiUyXWjdUZZ4HbISLJzVgt1AvrdOa7U49YRPcvuCUywkmURZ7uwJOheDjx19itbQ5KvA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",

storefront/package.json

@@ -35,6 +35,7 @@
   "devDependencies": {
     "@element-plus/nuxt": "^1.1.3",
     "@nuxtjs/apollo": "^5.0.0-alpha.14",
+    "@types/apollo-upload-client": "^18.0.0",
     "element-plus": "^2.10.1",
     "typescript": "^5.8.3",
     "vue-tsc": "^2.2.10"

storefront/pages/profile/settings.vue

@@ -6,7 +6,7 @@
           <input type="file" id="avatar" @change="uploadAvatar" />
           <label for="avatar">
             <img class="settings__avatar-image" v-if="user?.avatar" :src="user?.avatar" alt="">
-            <icon name="material-symbols-light:person-outline-rounded" size="100" />
+            <icon name="material-symbols-light:person-outline-rounded" size="100" v-else />
             <span class="settings__avatar-inner">
               <icon name="material-symbols:upload" size="40" />
             </span>
@@ -166,7 +166,6 @@ setPageTitle(t('breadcrumbs.settings'));
       width: 100%;
       height: 100%;
       object-fit: cover;
-      border-radius: 6px;
     }
 
     &-inner {

storefront/plugins/apollo-upload-link.ts

@@ -1,21 +0,0 @@
-import createUploadLink from "apollo-upload-client/createUploadLink.mjs";
-
-export default defineNuxtPlugin(async () => {
-  const { client } = useApolloClient()
-
-  if (client.name !== 'default') return
-
-  const runtime = useRuntimeConfig()
-  const token = useCookie(
-    `${runtime.public.evibesProjectName?.toLowerCase()}-access`
-  ).value || ''
-
-  const uploadLink = createUploadLink({
-    uri: `https://api.${runtime.public.evibesBaseDomain}/graphql/`,
-    credentials: 'include',
-    headers: { 'X-EVIBES-AUTH': token }
-  })
-
-  client.setLink(uploadLink)
-  console.log('✅ apollo link replaced to uploadLink')
-})

storefront/plugins/apollo.ts

@@ -1,18 +1,49 @@
+import { from, ApolloLink } from '@apollo/client/core';
+import { onError } from '@apollo/client/link/error';
+import { setContext } from '@apollo/client/link/context';
+import { provideApolloClient } from '@vue/apollo-composable';
+import createUploadLink from "apollo-upload-client/createUploadLink.mjs";
 import { useAppConfig } from '~/composables/config';
 
-export default defineNuxtPlugin(() => {
+export default defineNuxtPlugin((nuxtApp) => {
-  const { COOKIES_LOCALE_KEY } = useAppConfig();
+  const runtime = useRuntimeConfig();
-  const localeCookie = useCookie(COOKIES_LOCALE_KEY);
+  const localeCookie = useCookie(useAppConfig().COOKIES_LOCALE_KEY);
-  const originalFetch = globalThis.fetch;
+  const token = useCookie(useAppConfig().COOKIES_ACCESS_TOKEN_KEY).value || '';
+  const { $apollo } = nuxtApp;
 
-  globalThis.fetch = (input, init = {}) => {
+  const errorLink = onError((err) => {
-    const lang = localeCookie.value || 'en-gb';
+    nuxtApp.callHook('apollo:error', err);
-    const headers = new Headers(init.headers as any);
-    headers.set('Accept-Language', lang);
-
-    return originalFetch(input, {
-      ...init,
-      headers
   });
+
+  const authLink = setContext(async (_, { headers }) => {
+    const hdrs: Record<string,string> = {
+      ...headers,
+      'Accept-Language': localeCookie.value || 'en-gb'
     };
+
+    if (token) {
+      hdrs['X-EVIBES-AUTH'] = `Bearer ${token}`;
+    }
+
+    return { headers: hdrs };
+  });
+
+  const customLink = new ApolloLink((operation, forward) => {
+    return forward(operation).map((data) => {
+      return data;
+    });
+  });
+
+  const httpLink = createUploadLink({
+    uri: `https://api.${runtime.public.evibesBaseDomain}/graphql/`
+  });
+
+  $apollo.defaultClient.setLink(from([
+    errorLink,
+    authLink,
+    customLink,
+    httpLink,
+  ]));
+
+  provideApolloClient($apollo.defaultClient);
 });