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`.
This commit is contained in:
parent
52b32bd608
commit
4957039fc5
7 changed files with 67 additions and 58 deletions
|
|
@ -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>(
|
||||
UPLOAD_AVATAR,
|
||||
// {
|
||||
// context: { hasUpload: true }
|
||||
// }
|
||||
);
|
||||
const { mutate, onDone, loading, error } = useMutation<IAvatarUploadResponse>(UPLOAD_AVATAR);
|
||||
|
||||
async function uploadAvatar(event: Event) {
|
||||
const file = (event.target as HTMLInputElement).files?.[0];
|
||||
if (!file) return;
|
||||
console.log(file)
|
||||
|
||||
await mutate({ file });
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
// }
|
||||
}
|
||||
}
|
||||
})
|
||||
20
storefront/package-lock.json
generated
20
storefront/package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
})
|
||||
|
|
@ -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(() => {
|
||||
const { COOKIES_LOCALE_KEY } = useAppConfig();
|
||||
const localeCookie = useCookie(COOKIES_LOCALE_KEY);
|
||||
const originalFetch = globalThis.fetch;
|
||||
export default defineNuxtPlugin((nuxtApp) => {
|
||||
const runtime = useRuntimeConfig();
|
||||
const localeCookie = useCookie(useAppConfig().COOKIES_LOCALE_KEY);
|
||||
const token = useCookie(useAppConfig().COOKIES_ACCESS_TOKEN_KEY).value || '';
|
||||
const { $apollo } = nuxtApp;
|
||||
|
||||
globalThis.fetch = (input, init = {}) => {
|
||||
const lang = localeCookie.value || 'en-gb';
|
||||
const headers = new Headers(init.headers as any);
|
||||
headers.set('Accept-Language', lang);
|
||||
const errorLink = onError((err) => {
|
||||
nuxtApp.callHook('apollo:error', err);
|
||||
});
|
||||
|
||||
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);
|
||||
});
|
||||
Loading…
Reference in a new issue