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

 更新时间:2023年02月23日 10:24:33   作者:三知之灵  
这篇文章主要介绍了vue3.x中apollo的使用,通过前端自身直接获取到apollo的配置目前看到官方支持的客户端是没有vue的,本文给大家介绍了前端获取到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 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配置

根据目前的环境使用客户端的方式获取Apollo配置失败,发现目前官方推荐的还有一种方式便是通过接口获取

通过不带缓存的Http接口从Apollo读取配置

接口URL格式: {config_server_url}/configs/{appId}/{clusterName}/{namespaceName}?releaseKey={releaseKey}&ip={clientIp}

Method方式: GET

参数说明

参数名是否必须参数值备注
config_server_urlApollo配置服务的地址,非UI界面的地址
appId应用的appId
clusterName集群名 一般情况下传入 default 即可。如果希望配置按集群划分,可以参考集群独立配置说明做相关配置,然后在这里填入对应的集群名。
namespaceNameNamespace的名字,如果没有新建过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的使用的文章就介绍到这了,更多相关vue apollo使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • VUE+elementui组件在table-cell单元格中绘制微型echarts图

    VUE+elementui组件在table-cell单元格中绘制微型echarts图

    这篇文章主要介绍了VUE+elementui组件在table-cell单元格中绘制微型echarts图,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • 利用Vue3+Element-plus实现大文件分片上传组件

    利用Vue3+Element-plus实现大文件分片上传组件

    在开发中如果上传的文件过大,可以考虑分片上传,分片就是说将文件拆分来进行上传,将各个文件的切片传递给后台,然后后台再进行合并,下面这篇文章主要给大家介绍了关于利用Vue3+Element-plus实现大文件分片上传组件的相关资料,需要的朋友可以参考下
    2023-01-01
  • 详解vue 动态加载并注册组件且通过 render动态创建该组件

    详解vue 动态加载并注册组件且通过 render动态创建该组件

    这篇文章主要介绍了vue 动态加载并注册组件且通过 render动态创建该组件,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • Element Plus组件Form表单Table表格二次封装的完整过程

    Element Plus组件Form表单Table表格二次封装的完整过程

    一般在后台管理系统的开发中,都会遇到很多table,但每一次都去引入el-table就会导致代码十分冗余,所以基于组件做一下二次封装成自己需要的组件就十分nice,下面这篇文章主要给大家介绍了关于Element Plus组件Form表单Table表格二次封装的相关资料,需要的朋友可以参考下
    2022-09-09
  • 基于Vue实现可选择不连续的时间范围的日期选择器

    基于Vue实现可选择不连续的时间范围的日期选择器

    这篇文章主要为大家详细介绍了如何基于Vue.js实现一个可选择不连续的时间范围的日期选择器,文中的示例代码简洁易懂,需要的可以参考一下
    2023-06-06
  • uniApp前端实现文字识别并提取详细分析

    uniApp前端实现文字识别并提取详细分析

    这篇文章主要介绍了如何实现文字图片分析的功能,包括页面结构、样式和脚本逻辑,主要步骤包括获取access_token、将图片转换为Base64格式、上传至百度文字识别接口并处理返回结果,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2025-02-02
  • vue实现消息向上无缝滚动效果

    vue实现消息向上无缝滚动效果

    这篇文章主要为大家详细介绍了vue实现消息向上无缝滚动效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • 深入解析Vue源码实例挂载与编译流程实现思路详解

    深入解析Vue源码实例挂载与编译流程实现思路详解

    这篇文章主要介绍了Vue源码实例挂载与编译流程实现思路详解,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • Vue3组件库框架搭建example环境的详细教程

    Vue3组件库框架搭建example环境的详细教程

    这篇文章主要介绍了Vue3组件库框架搭建example环境的详细教程,本文便搭建 example 开发环境和打包构建,并在example中使用组件库,需要的朋友可以参考下
    2022-11-11
  • 基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能

    基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能

    uni-liveShow是一个基于vue+uni-app技术开发的集小视频/IM聊天/直播等功能于一体的微直播项目。本文通过实例图文的形式给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友参考下吧
    2019-11-11

最新评论