今天小编给大家分享一下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 implementationconst cache = new InMemoryCache()// Create the apollo clientconst 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/client,否则就会报引入react错误
Uncaught (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)})交互访问也会返回相同的数据
以上就是“vue3.x中的apollo如何使用”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网行业资讯频道。
