vue3.x中apollo的使用案例代码

精美分子必拉黑

目前为止，前端获取动态数据，都是前端与服务端进行交互获取数据，但是如果只是获取简单的一些配置属性，并没有其它的接口需要服务端提供，此时在搭建一个服务器就是资源的浪费了，希望可以直接从 apollo的配置服务器中获取，无需额外的服务端接口
通过前端自身直接获取到apollo的配置目前看到官方支持的客户端是没有vue的，所以以下是前端获取到apollo数据的过程

通过客户端获取Apollo配置


环境

1. "vue": "^3.2.41",
   
2. "@vue/cli-service": "~5.0.8",

复制代码

工具的安装

1. "@vue/apollo-composable": "^4.0.0-beta.2",
   
2. "@vue/apollo-option": "^4.0.0-beta.2",
   
3. "graphql": "^16.6.0",
   
4. "graphql-tag": "^2.12.6",

复制代码

获取Apollo配置


相关代码

main.ts 配置建立链接

1. const httpLink = createHttpLink({
   
2.     // You should use an absolute URL here
   
3.     uri: apiApollo,
   
4.     // credentials: 'include'
   
5. })
   
6. // Cache implementation
   
7. const cache = new InMemoryCache()
   
8. 
   
9. // Create the apollo client
   
10. const apolloClient = new ApolloClient({
    
11.     link: httpLink,
    
12.     cache,
    
13. })
    
14. const apolloProvider = createApolloProvider({
    
15.     defaultClient: apolloClient,
    
16. })
    
17. 
    
18. const app = createApp(App, {
    
19.         setup() {
    
20.             provide(DefaultApolloClient, apolloClient)
    
21.         }
    
22.     });

复制代码

获取数据

1. import { useQuery } from "@vue/apollo-composable";
   
2. import gql from "graphql-tag";
   
3. export default defineComponent({
   
4.   name:"page-info",
   
5.   setup(){
   
6. 
   
7.     const { result, error, onResult, onError } = useQuery(gql`
   
8.     query getPartners {
   
9.       partners {
   
10.         label,
    
11.         value
    
12.       }
    
13.     }
    
14.     `)
    
15. 
    
16.     onResult(queryResult => {
    
17.       console.log("queryResultqueryResult", queryResult.data)
    
18.       console.log(queryResult.loading)
    
19.       console.log(queryResult.networkStatus)
    
20. 
    
21.     })
    
22. 
    
23.     onError(error => {
    
24.       console.log("queryResultqueryResult error", error.graphQLErrors)
    
25.       console.log(error.networkError)
    
26.     })
    
27.   }
    
28. })

复制代码

错误提示

1. Use the @apollo/client/core import path otherwise you will also import React.

复制代码

一定注意引入的位置是

1. import { ApolloClient, createHttpLink, InMemoryCache } from "@apollo/client/core";

复制代码

而不是

1. @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格式:

1. {config_server_url}/configs/{appId}/{clusterName}/{namespaceName}?releaseKey={releaseKey}&ip={clientIp}

复制代码

Method方式:

1. GET

复制代码

参数说明

参数名是否必须参数值备注config_server_url是Apollo配置服务的地址,非UI界面的地址appId是应用的appIdclusterName是集群名 一般情况下传入 default 即可。如果希望配置按集群划分，可以参考集群独立配置说明做相关配置，然后在这里填入对应的集群名。namespaceName是Namespace的名字,如果没有新建过Namespace的话，传入application即可。如果创建了Namespace，并且需要使用该Namespace的配置，则传入对应的Namespace名字。需要注意的是对于properties类型的namespace，只需要传入namespace的名字即可，如application。对于其它类型的namespace，需要传入namespace的名字加上后缀名，如datasources.jsonreleaseKey否上一次的releaseKey将上一次返回对象中的releaseKey传入即可，用来给服务端比较版本，如果版本比下来没有变化，则服务端直接返回304以节省流量和运算ip否应用部署的机器ip这个参数是可选的，用来实现灰度发布。config_server_url:不是配置的UI界面的DNS，是服务器的DNS，并且两者没有关联，所以如果直接拿界面的DNS获取是获取不到数据的

浏览器方式

https://apollo-config.uat.XXXX/configs/项目ID/项目空间/application
返回数据：

1. {
   
2.   "appId": "xxxx",
   
3.   "cluster": "default",
   
4.   "namespaceName": "application",
   
5.   "configurations": {//application 所有配置的值
   
6.     "title": "Apollo set value"
   
7.   },
   
8.   "releaseKey": "2023021"
   
9. }

复制代码

请求交互方式

1. axios({
   
2.   method:'get',
   
3.   url:'/configs/{appId}/{clusterName}/{namespaceName}'
   
4. }).then((res:any)=>{
   
5.   console.log(res)
   
6. })

复制代码

交互访问也会返回相同的数据
到此这篇关于vue3.x中apollo的使用的文章就介绍到这了,更多相关vue apollo使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/article/276230.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！