佛山市桂城建设局网站,古风wordpress,陇南做网站,南昌专业制作网站设计[apollo]vue3.x中apollo的使用通过客户端获取Apollo配置环境工具的安装获取Apollo配置相关代码错误提示Uncaught (in promise) Error: Apollo client with id default not found. Use provideApolloClient() if you are outside of a component setup通过开放接口获取Apollo配置…
[apollo]vue3.x中apollo的使用通过客户端获取Apollo配置环境工具的安装获取Apollo配置相关代码错误提示Uncaught (in promise) Error: Apollo client with id default not found. Use provideApolloClient() if you are outside of a component setup通过开放接口获取Apollo配置通过不带缓存的Http接口从Apollo读取配置参数说明浏览器方式请求交互方式目前为止前端获取动态数据都是前端与服务端进行交互获取数据但是如果只是获取简单的一些配置属性并没有其它的接口需要服务端提供此时在搭建一个服务器就是资源的浪费了希望可以直接从 apollo的配置服务器中获取无需额外的服务端接口通过前端自身直接获取到apollo的配置目前看到官方支持的客户端是没有vue的所以以下是前端获取到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 hereuri: 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(gqlquery 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是应用的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
返回数据
{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)
})交互访问也会返回相同的数据
