vue3.x中apollo的使用案例代碼
目前為止,前端獲取動態(tài)數(shù)據(jù),都是前端與服務(wù)端進(jìn)行交互獲取數(shù)據(jù),但是如果只是獲取簡單的一些配置屬性,并沒有其它的接口需要服務(wù)端提供,此時在搭建一個服務(wù)器就是資源的浪費(fèi)了,希望可以直接從 apollo的配置服務(wù)器中獲取,無需額外的服務(wù)端接口
通過前端自身直接獲取到apollo的配置目前看到官方支持的客戶端是沒有vue的,所以以下是前端獲取到apollo數(shù)據(jù)的過程
通過客戶端獲取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)
})
}
})錯誤提示
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配置
根據(jù)目前的環(huán)境使用客戶端的方式獲取Apollo配置失敗,發(fā)現(xiàn)目前官方推薦的還有一種方式便是通過接口獲取
通過不帶緩存的Http接口從Apollo讀取配置
接口URL格式: {config_server_url}/configs/{appId}/{clusterName}/{namespaceName}?releaseKey={releaseKey}&ip={clientIp}
Method方式: GET
參數(shù)說明
| 參數(shù)名 | 是否必須 | 參數(shù)值 | 備注 |
|---|---|---|---|
| config_server_url | 是 | Apollo配置服務(wù)的地址,非UI界面的地址 | |
| appId | 是 | 應(yīng)用的appId | |
| clusterName | 是 | 集群名 一般情況下傳入 default 即可。 | 如果希望配置按集群劃分,可以參考集群獨(dú)立配置說明做相關(guān)配置,然后在這里填入對應(yīng)的集群名。 |
| namespaceName | 是 | Namespace的名字,如果沒有新建過Namespace的話,傳入application即可。 | 如果創(chuàng)建了Namespace,并且需要使用該Namespace的配置,則傳入對應(yīng)的Namespace名字。需要注意的是對于properties類型的namespace,只需要傳入namespace的名字即可,如application。對于其它類型的namespace,需要傳入namespace的名字加上后綴名,如datasources.json |
| releaseKey | 否 | 上一次的releaseKey | 將上一次返回對象中的releaseKey傳入即可,用來給服務(wù)端比較版本,如果版本比下來沒有變化,則服務(wù)端直接返回304以節(jié)省流量和運(yùn)算 |
| ip | 否 | 應(yīng)用部署的機(jī)器ip | 這個參數(shù)是可選的,用來實(shí)現(xiàn)灰度發(fā)布。 |
config_server_url:不是配置的UI界面的DNS,是服務(wù)器的DNS,并且兩者沒有關(guān)聯(lián),所以如果直接拿界面的DNS獲取是獲取不到數(shù)據(jù)的
瀏覽器方式
https://apollo-config.uat.XXXX/configs/項(xiàng)目ID/項(xiàng)目空間/application
返回數(shù)據(jù):
{
"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)
})交互訪問也會返回相同的數(shù)據(jù)
到此這篇關(guān)于vue3.x中apollo的使用的文章就介紹到這了,更多相關(guān)vue apollo使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
VUE+elementui組件在table-cell單元格中繪制微型echarts圖
這篇文章主要介紹了VUE+elementui組件在table-cell單元格中繪制微型echarts圖,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
利用Vue3+Element-plus實(shí)現(xiàn)大文件分片上傳組件
在開發(fā)中如果上傳的文件過大,可以考慮分片上傳,分片就是說將文件拆分來進(jìn)行上傳,將各個文件的切片傳遞給后臺,然后后臺再進(jìn)行合并,下面這篇文章主要給大家介紹了關(guān)于利用Vue3+Element-plus實(shí)現(xiàn)大文件分片上傳組件的相關(guān)資料,需要的朋友可以參考下2023-01-01
詳解vue 動態(tài)加載并注冊組件且通過 render動態(tài)創(chuàng)建該組件
這篇文章主要介紹了vue 動態(tài)加載并注冊組件且通過 render動態(tài)創(chuàng)建該組件,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05
Element?Plus組件Form表單Table表格二次封裝的完整過程
一般在后臺管理系統(tǒng)的開發(fā)中,都會遇到很多table,但每一次都去引入el-table就會導(dǎo)致代碼十分冗余,所以基于組件做一下二次封裝成自己需要的組件就十分nice,下面這篇文章主要給大家介紹了關(guān)于Element?Plus組件Form表單Table表格二次封裝的相關(guān)資料,需要的朋友可以參考下2022-09-09
基于Vue實(shí)現(xiàn)可選擇不連續(xù)的時間范圍的日期選擇器
這篇文章主要為大家詳細(xì)介紹了如何基于Vue.js實(shí)現(xiàn)一個可選擇不連續(xù)的時間范圍的日期選擇器,文中的示例代碼簡潔易懂,需要的可以參考一下2023-06-06
uniApp前端實(shí)現(xiàn)文字識別并提取詳細(xì)分析
這篇文章主要介紹了如何實(shí)現(xiàn)文字圖片分析的功能,包括頁面結(jié)構(gòu)、樣式和腳本邏輯,主要步驟包括獲取access_token、將圖片轉(zhuǎn)換為Base64格式、上傳至百度文字識別接口并處理返回結(jié)果,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-02-02
深入解析Vue源碼實(shí)例掛載與編譯流程實(shí)現(xiàn)思路詳解
這篇文章主要介紹了Vue源碼實(shí)例掛載與編譯流程實(shí)現(xiàn)思路詳解,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05
Vue3組件庫框架搭建example環(huán)境的詳細(xì)教程
這篇文章主要介紹了Vue3組件庫框架搭建example環(huán)境的詳細(xì)教程,本文便搭建?example?開發(fā)環(huán)境和打包構(gòu)建,并在example中使用組件庫,需要的朋友可以參考下2022-11-11
基于vue+uniapp直播項(xiàng)目實(shí)現(xiàn)uni-app仿抖音/陌陌直播室功能
uni-liveShow是一個基于vue+uni-app技術(shù)開發(fā)的集小視頻/IM聊天/直播等功能于一體的微直播項(xiàng)目。本文通過實(shí)例圖文的形式給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友參考下吧2019-11-11

