我正在使用 Nuxt 和 Nuxt-Apollo创建我的 Vue 应用程序。我的 nuxt.config.js
文件中有以下 apollo 配置:
apollo: {
clientConfigs: {
default: {
httpEndpoint: 'http://localhost:8000/graphql/'
},
stage: {
httpEndpoint: 'https://example-stage.com/graphql/'
}
prod: {
httpEndpoint: 'https://example.com/graphql/'
}
}
}
如何指向 stage
或 prod
配置。每次我运行该应用程序时,它都指向 default
配置。必须有我可以设置它的地方。
最佳答案
假设您尝试访问多个客户端,而不仅仅是用于生产和开发的不同客户端,这可能会有所帮助,因为我在当前项目中使用的就是这种方法。
apollo: {
includeNodeModules: true, // optional, default: false (this includes graphql-tag for node_modules folder)
authenticationType: 'Basic', // optional, default: 'Bearer'
errorHandler: '~/apollo/customErrorHandler',
clientConfigs: {
default:
{
httpEndpoint:
'https://me.something.com/api/graphql/query?token=******',
httpLinkOptions: {
credentials: 'same-origin'
}
},
// '~/apollo/clientConfig.js',
otherClient: {
httpEndpoint:
'https://second-endpoint-gql.herokuapp.com/v1/graphql',
httpLinkOptions: {
credentials: 'same-origin'
}
}
}
},
现在您需要做的就是像往常一样进行查询,但区别在于 vue 组件。
/gql/allCars.gql
{
allCars {
id
make
model
year
}
}
对默认值的调用将像往常一样进行:
<script>
import allcars from '~/gql/users'
export default {
apollo: {
allcars: {
prefetch: true,
query: allcars
}
},
filters: {
charIndex (i) {
return String.fromCharCode(97 + i)
}
},
head: {
title: ....
},
data () {
return {
...
}
}
}
</script>
调用您需要添加 $client 的次要端点:
<script>
import allcars from '~/gql/users'
export default {
apollo: {
$client: 'otherClient',
allcars: {
prefetch: true,
query: allcars
}
},
filters: {
charIndex (i) {
return String.fromCharCode(97 + i)
}
},
head: {
title: ....
},
data () {
return {
...
}
}
}
</script>
apollo 调试器似乎只查询 apollo 配置中端点列表中的最后一个端点,在我的例子中是“otherClient”。
引用我上面整合的方法:Vue multiple client
关于javascript - Nuxt : choose client config other than default,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57650714/