欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2023年02月23日 10:24:33   作者:三知之靈  
這篇文章主要介紹了vue3.x中apollo的使用,通過(guò)前端自身直接獲取到apollo的配置目前看到官方支持的客戶端是沒(méi)有vue的,本文給大家介紹了前端獲取到apollo數(shù)據(jù)的過(guò)程,需要的朋友可以參考下

目前為止,前端獲取動(dòng)態(tài)數(shù)據(jù),都是前端與服務(wù)端進(jìn)行交互獲取數(shù)據(jù),但是如果只是獲取簡(jiǎn)單的一些配置屬性,并沒(méi)有其它的接口需要服務(wù)端提供,此時(shí)在搭建一個(gè)服務(wù)器就是資源的浪費(fèi)了,希望可以直接從 apollo的配置服務(wù)器中獲取,無(wú)需額外的服務(wù)端接口

通過(guò)前端自身直接獲取到apollo的配置目前看到官方支持的客戶端是沒(méi)有vue的,所以以下是前端獲取到apollo數(shù)據(jù)的過(guò)程

通過(guò)客戶端獲取Apollo配置

環(huán)境

"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配置

相關(guān)代碼

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)
        }
    });

獲取數(shù)據(jù)

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)
    })
  }
})

錯(cuò)誤提示

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

一定注意引入的位置是import { ApolloClient, createHttpLink, InMemoryCache } from "@apollo/client/core";而不是@apollo/client,否則就會(huì)報(bào)引入react錯(cuò)誤

Uncaught (in promise) Error: Apollo client with id default not found. Use provideApolloClient() if you are outside of a component setup

該方式嘗試多種方式都是提示該錯(cuò)誤,并且vue3.x 該方式暫時(shí)還沒(méi)有比較完整的文檔說(shuō)明,所以該方式等以后更成熟之后在考慮

通過(guò)開(kāi)放接口獲取Apollo配置

根據(jù)目前的環(huán)境使用客戶端的方式獲取Apollo配置失敗,發(fā)現(xiàn)目前官方推薦的還有一種方式便是通過(guò)接口獲取

通過(guò)不帶緩存的Http接口從Apollo讀取配置

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

Method方式: GET

參數(shù)說(shuō)明

參數(shù)名是否必須參數(shù)值備注
config_server_urlApollo配置服務(wù)的地址,非UI界面的地址
appId應(yīng)用的appId
clusterName集群名 一般情況下傳入 default 即可。如果希望配置按集群劃分,可以參考集群獨(dú)立配置說(shuō)明做相關(guān)配置,然后在這里填入對(duì)應(yīng)的集群名。
namespaceNameNamespace的名字,如果沒(méi)有新建過(guò)Namespace的話,傳入application即可。如果創(chuàng)建了Namespace,并且需要使用該Namespace的配置,則傳入對(duì)應(yīng)的Namespace名字。需要注意的是對(duì)于properties類型的namespace,只需要傳入namespace的名字即可,如application。對(duì)于其它類型的namespace,需要傳入namespace的名字加上后綴名,如datasources.json
releaseKey上一次的releaseKey將上一次返回對(duì)象中的releaseKey傳入即可,用來(lái)給服務(wù)端比較版本,如果版本比下來(lái)沒(méi)有變化,則服務(wù)端直接返回304以節(jié)省流量和運(yùn)算
ip應(yīng)用部署的機(jī)器ip這個(gè)參數(shù)是可選的,用來(lái)實(shí)現(xiàn)灰度發(fā)布。

config_server_url:不是配置的UI界面的DNS,是服務(wù)器的DNS,并且兩者沒(méi)有關(guān)聯(lián),所以如果直接拿界面的DNS獲取是獲取不到數(shù)據(jù)的

瀏覽器方式

https://apollo-config.uat.XXXX/configs/項(xiàng)目ID/項(xiàng)目空間/application

返回?cái)?shù)據(jù):

{
  "appId": "xxxx",
  "cluster": "default",
  "namespaceName": "application",
  "configurations": {//application 所有配置的值
    "title": "Apollo set value"
  },
  "releaseKey": "2023021"
}

請(qǐng)求交互方式

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

交互訪問(wèn)也會(huì)返回相同的數(shù)據(jù)

到此這篇關(guān)于vue3.x中apollo的使用的文章就介紹到這了,更多相關(guān)vue apollo使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • vue打包部署到tomcat上頁(yè)面空白資源加載不出來(lái)的解決

    vue打包部署到tomcat上頁(yè)面空白資源加載不出來(lái)的解決

    這篇文章主要介紹了vue打包部署到tomcat上頁(yè)面空白資源加載不出來(lái)的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • Vue運(yùn)用transition實(shí)現(xiàn)過(guò)渡動(dòng)畫(huà)

    Vue運(yùn)用transition實(shí)現(xiàn)過(guò)渡動(dòng)畫(huà)

    vue的過(guò)渡動(dòng)畫(huà),主要是transition標(biāo)簽的使用,配合css動(dòng)畫(huà)實(shí)現(xiàn)的。接下來(lái)通過(guò)本文給大家分享Vue運(yùn)用transition實(shí)現(xiàn)過(guò)渡動(dòng)畫(huà)效果,感興趣的朋友一起看看吧
    2019-05-05
  • 一文解決vue2 element el-table自適應(yīng)高度問(wèn)題

    一文解決vue2 element el-table自適應(yīng)高度問(wèn)題

    在寫(xiě)公司后臺(tái)項(xiàng)目的時(shí)候遇到一個(gè)需求,要求表格頁(yè)面不能有滾動(dòng)條,所以必須封裝一個(gè)公共方法來(lái)實(shí)現(xiàn)表格自適應(yīng)高度,本問(wèn)小編給大家介紹了如何解決vue2 element el-table自適應(yīng)高度問(wèn)題,需要的朋友可以參考下
    2023-11-11
  • vue 自定義 select內(nèi)置組件

    vue 自定義 select內(nèi)置組件

    這篇文章主要介紹了vue 自定義內(nèi)置組件 select的相關(guān)知識(shí),整合了第三方j(luò)query 插件select2,具體實(shí)例代碼大家參考下本文
    2018-04-04
  • vue2.0+SVG實(shí)現(xiàn)音樂(lè)播放圓形進(jìn)度條組件

    vue2.0+SVG實(shí)現(xiàn)音樂(lè)播放圓形進(jìn)度條組件

    這篇文章主要為大家詳細(xì)介紹了Vue2.0+SVG實(shí)現(xiàn)音樂(lè)播放圓形進(jìn)度條組件,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2019-09-09
  • 詳解為element-ui的Select和Cascader添加彈層底部操作按鈕

    詳解為element-ui的Select和Cascader添加彈層底部操作按鈕

    這篇文章主要介紹了詳解為element-ui的Select和Cascader添加彈層底部操作按鈕,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-02-02
  • vue中?render?函數(shù)功能與原理分析

    vue中?render?函數(shù)功能與原理分析

    這篇文章主要介紹了vue中?render?函數(shù)功能與原理,結(jié)合實(shí)例形式分析了vue中render函數(shù)的基本功能、原理及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
    2023-06-06
  • Vue3.0利用vue-grid-layout插件實(shí)現(xiàn)拖拽布局

    Vue3.0利用vue-grid-layout插件實(shí)現(xiàn)拖拽布局

    這篇文章主要介紹了Vue3.0利用vue-grid-layout插件實(shí)現(xiàn)拖拽布局,工作中難免遇到需要對(duì)頁(yè)面布局進(jìn)行拖拽然后改變布局,保存布局,下面文章就圍繞Vue3.0利用vue-grid-layout插件實(shí)現(xiàn)拖拽布局的相關(guān)資料展開(kāi)詳細(xì)內(nèi)容,需要的朋友可以參考一下
    2021-11-11
  • Vue中JSON文件神奇應(yīng)用fetch、axios異步加載與模塊導(dǎo)入全指南詳細(xì)教程

    Vue中JSON文件神奇應(yīng)用fetch、axios異步加載與模塊導(dǎo)入全指南詳細(xì)教程

    在Vue中使用JSON文件有多種方式,包括使用fetch方法加載JSON文件、使用axios庫(kù)加載JSON文件,以及將JSON文件導(dǎo)入為模塊,這篇文章主要介紹了Vue中JSON文件神奇應(yīng)用fetch、axios異步加載與模塊導(dǎo)入全指南詳細(xì)教程,需要的朋友可以參考下
    2024-01-01
  • vue-router history模式下的微信分享小結(jié)

    vue-router history模式下的微信分享小結(jié)

    本篇文章主要介紹了vue-router history模式下的微信分享小結(jié),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-07-07

最新評(píng)論