今天小编给大家分享一下vue3.x中的apollo如何使用的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
通过客户端获取Apollo配置
环境
"vue": "^3.2.41",
"@vue/cli-service": "~5.0.8",工具的安装
"@vue/apollo-composable": "^4.0.0-beta.2",
"@vue/apollo-option": "^4.0.0-beta.2",
"graphql": "^16.6.0",
"graphql-tag": "^2.12.6",获取Apollo配置
相关代码
main.ts 配置建立链接
const httpLink = createHttpLink({
// You should use an absolute URL here
uri: apiApollo,
// credentials: 'include'
})
// Cache implementation
const cache = new InMemoryCache()
// Create the apollo client
const apolloClient = new ApolloClient({
link: httpLink,
cache,
})
const apolloProvider = createApolloProvider({
defaultClient: apolloClient,
})
const app = createApp(App, {
setup() {
provide(DefaultApolloClient, apolloClient)
}
});获取数据
import { useQuery } from "@vue/apollo-composable";
import gql from "graphql-tag";
export default defineComponent({
name:"page-info",
setup(){
const { result, error, onResult, onError } = useQuery(gql`
query getPartners {
partners {
label,
value
}
}
`)
onResult(queryResult => {
console.log("queryResultqueryResult", queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError(error => {
console.log("queryResultqueryResult error", error.graphQLErrors)
console.log(error.networkError)
})
}
})错误提示
Use the @apollo/client/core import path otherwise you will also import React.
一定注意引入的位置是
import { ApolloClient, createHttpLink, InMemoryCache } from "@apollo/client/core";@apollo/clientUncaught (in promise) Error: Apollo client with id default not found. Use provideApolloClient() if you are outside of a component setup
该方式尝试多种方式都是提示该错误,并且vue3.x 该方式暂时还没有比较完整的文档说明，所以该方式等以后更成熟之后在考虑
通过开放接口获取Apollo配置
根据目前的环境使用客户端的方式获取Apollo配置失败，发现目前官方推荐的还有一种方式便是通过接口获取
通过不带缓存的Http接口从Apollo读取配置
接口URL格式:
{config_server_url}/configs/{appId}/{clusterName}/{namespaceName}?releaseKey={releaseKey}&ip={clientIp}Method方式:
GET参数说明
| 参数名 | 是否必须 | 参数值 | 备注 |
|---|---|---|---|
| config_server_url | 是 | Apollo配置服务的地址,非UI界面的地址 | |
| appId | 是 | 应用的appId | |
| clusterName | 是 | 集群名 一般情况下传入 default 即可。 | 如果希望配置按集群划分，可以参考集群独立配置说明做相关配置，然后在这里填入对应的集群名。 |
| namespaceName | 是 | Namespace的名字,如果没有新建过Namespace的话，传入application即可。 | 如果创建了Namespace，并且需要使用该Namespace的配置，则传入对应的Namespace名字。需要注意的是对于properties类型的namespace，只需要传入namespace的名字即可，如application。对于其它类型的namespace，需要传入namespace的名字加上后缀名，如datasources.json |
| releaseKey | 否 | 上一次的releaseKey | 将上一次返回对象中的releaseKey传入即可，用来给服务端比较版本，如果版本比下来没有变化，则服务端直接返回304以节省流量和运算 |
| ip | 否 | 应用部署的机器ip | 这个参数是可选的，用来实现灰度发布。 |
config_server_url:不是配置的UI界面的DNS，是服务器的DNS，并且两者没有关联，所以如果直接拿界面的DNS获取是获取不到数据的
浏览器方式
https://apollo-config.uat.XXXX/configs/项目ID/项目空间/application
返回数据：
{
"appId": "xxxx",
"cluster": "default",
"namespaceName": "application",
"configurations": {//application 所有配置的值
"title": "Apollo set value"
},
"releaseKey": "2023021"
}请求交互方式
axios({
method:'get',
url:'/configs/{appId}/{clusterName}/{namespaceName}'
}).then((res:any)=>{
console.log(res)
})交互访问也会返回相同的数据
