apollo,多个请求API
import Vue from 'vue'
import VueApollo from 'vue-apollo'
import { Message, Loading } from 'element-ui'
import { createApolloClient } from 'vue-cli-plugin-apollo/graphql-client'
import { ApolloLink, from } from 'apollo-link'
import { onError } from 'apollo-link-error'
import { getToken } from '@/utils/auth'
import router from '../router'
import store from '../store'
Vue.use(VueApollo)
let loadingInstance = null
const httpEndpoint = process.env.VUE_APP_GRAPHQL_HTTP
const httpEndpointS = process.env.VUE_APP_GRAPHQL_HTTPS
const httpGuide = process.env.VUE_APP_GRAPHQL_GUIDE
// 拦截器：显示统一加载动画
const loadingLink = new ApolloLink((operation, forward) => {
loadingInstance = Loading.service({
lock: true,
fullscreen: true
})
return forward(operation)
})
// 拦截器：统一响应处理
const afterwareLink = new ApolloLink((operation, forward) => {
return forward(operation).map(response => {
if (loadingInstance) {
loadingInstance.close()
}
console.log('[Afterware] response:', response)
return response
})
})
// 拦截器：统一错误处理
const errorLink = onError(({ graphQLErrors, networkError }) => {
if (loadingInstance) {
loadingInstance.close()
}
if (graphQLErrors) {
graphQLErrors.map(({ message, locations, path }) => {
console.log(`+++++ [GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`)
})
}
if (networkError) {
const code = networkError.result.message
console.log(`++++++ [Network error]: ${code}`)
if (code === '400' || code === '402' || code === '403') {
Message.error('还未登录或登录已失效')
store.dispatch('silentLogout')
router.replace('/login')
} else if (code === '401') {
Message.error('您没有足够的权限')
} else {
Message.error('服务器出现未知错误')
}
}
})
/**
* 创建Apollo客户端实例
*/
export function createProvider () {
const baseConfig = {
httpEndpoint,
getAuth: () => undefined
}
const linkWithLoading = from([loadingLink, afterwareLink, errorLink])
const linkWitoutLoading = from([afterwareLink, errorLink])
// 客户端：适用于需要授权的请求，带loading动画
const { apolloClient: animatedApiClient } = createApolloClient({
...baseConfig,
link: linkWithLoading,
getAuth: () => getToken()
})
// 客户端：适用于需要授权的请求，不带loading动画
const { apolloClient: plainClient } = createApolloClient({
...baseConfig,
link: linkWitoutLoading,
getAuth: () => getToken()
})
// 客户端：适用于无授权限制的请求，带loading动画
const { apolloClient: animatedBaseClient } = createApolloClient({
...baseConfig,
link: linkWithLoading
})
// 客户端：适用于无授权限制的请求，不带loading动画
const { apolloClient: plainBaseClient } = createApolloClient({
...baseConfig,
link: linkWitoutLoading
})
// 客户端：指南，带loading动画
const { apolloClient: guideClient } = createApolloClient({
httpEndpoint: httpEndpointS,
link: linkWithLoading
})
// 客户端：指南，不带loading动画
const { apolloClient: guideClients } = createApolloClient({
httpEndpoint: httpEndpointS,
link: linkWitoutLoading
})
// 客户端：指南，带loading动画
const { apolloClient: guideIdentity } = createApolloClient({
httpEndpoint: httpGuide,
link: linkWithLoading
})
// 客户端：指南，不带loading动画
const { apolloClient: guideIdentitys } = createApolloClient({
httpEndpoint: httpGuide,
link: linkWitoutLoading
})
return new VueApollo({
clients: {
'animatedApi': animatedApiClient,
'animatedBase': animatedBaseClient,
'api': plainClient,
'base': plainBaseClient,
'guide': guideClient,
'guides': guideClients,
'guideIdentity': guideIdentity,
'apiguideIdentity': guideIdentitys
},
defaultClient: animatedApiClient,
errorHandler (error) {
// eslint-disable-next-line no-console
console.log('%cError', 'background: red; color: white; padding: 2px 4px; border-radius: 3px; font-weight: bold;', error.message)
}
})
}