今天小编给大家分享一下vue3.x中的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",
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/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配置失败,发现目前官方推荐的还有一种方式便是通过接口获取
接口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如何使用”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。