1，js方法封裝

//util.js
//一些發起請求的依賴
import gql from 'graphql-tag'
import initapolloclient from '@/assets/js/apolloclient.js'
import $store from '@/store/index'
    // 根據openid獲取人員姓名
    // openid的取值matchkey
    // 匹配後將姓名set到readkey字段中
export const gerMultiUsername = async(origindata, matchkey, readkey) => {
    let allopenids = origindata.map((item) => item[matchkey]);
    allopenids = [...new Set(allopenids)];
    let queryinputs = []; //形參
    let queryinputsval = {}; //實參
    let querybody = []; //請求體
    allopenids.forEach((item, index) => {
        queryinputs.push(`$keywords${index}:String`);
        queryinputsval[`keywords${index}`] = `${item}`; //openid進行過濾
        querybody.push(`queryuser${index}:users(
          keywords:$keywords${index}
          ){
            edges{node{name  openid}}
          }`)
    })
    let queryall = `query ( ${queryinputs.join()}){
        ${querybody.join('')}
      }`;
    const iamuri = ($store.state.api_gateway_uri + "/iam");
    const iamclient = initapolloclient.initAppllo(iamuri);
    await iamclient.query({
        query: gql(queryall),
        variables: queryinputsval
    }).then((res) => {
        if (res.data) {
            let successitem = []
            for (let key in res.data) {
                if (res.data[key]) {
                    if (res.data[key].edges && res.data[key].edges.length == 1 && res.data[key].edges[0].node) {
                        successitem.push(res.data[key].edges[0].node)
                    }
                }
            }
            // 
            if (successitem && successitem.length) {
                successitem.forEach((item) => {
                    if (item.openid) {
                        origindata.forEach((nitem) => {
                            if (item.openid == nitem[matchkey]) {
                                nitem[readkey] = item.name ? item.name : nitem[matchkey]
                            }
                        })
                    }
                })
            }
        }
    }).catch((err) => {
        console.log(err)
    })
}

2:vue文件中引入使用

<script>
import {gerMultiUsername} from '@/assets/js/utils'

methods:{
getAccessLogs(){
    this.$apollo.query({
        query: gqlreq.accessLogs,
        variables:{
          first:20,
          offset:0
        }
      }).then(async (res) => {
         if (res.data && res.data.accessLogs&& res.data.accessLogs) {
          let logs=commonjs.takeoffEdges(res.data, "accessLogs");
          if((logs&&logs.length)){
            //轉openid為人員姓名
            // 讀取account為openid,匹配後將姓名set到accountname字段中
            await gerMultiUsername(logs,'account','accountname').catch(()=>{})
            this.tabledata=logs
        }
      }).catch((e)=>{
        console.log('catch err',e)
      })
}

}
</script>

3:控制枱請求

根據圖2、3可見，雖然查詢了兩個人的openid，但是控制枱只發起了一個請求。返回結果中也根據query語句返回了兩個請求結果。如果某一個請求發生錯誤，會在對應請求結果中返回錯誤信息，並不會污染其他請求。

相對於promise.all更加提升性能，也更便於錯誤定位及處理。

20230913 更新mutation方式

export const gerMultiCreateApp = async(saveitems, callback) => {
    let mutateinputs = []
    let mutateinputsval = {}
    let mutationbody = []
    saveitems.forEach((item, index) => {
        mutateinputs.push(`$app${index}:AppInput!`);
        mutateinputsval[`app${index}`] = {...item}
        mutationbody.push(`createApp${index}:createApp(
            app:$app${index}
            ){
              id
              name
            }`)
    });
    // mutateinputsval=mutateinputsval
    let multimutate = `mutation ( ${mutateinputs.join()}){
          ${mutationbody.join('')}
        }`;
    // 初始化client
    const dynamicclient = initapolloclient.initAppllo($store.state.api_gateway_uri + "/infoplus-v3");
    dynamicclient.mutate({
        mutation: gql(multimutate),
        variables: mutateinputsval
    }).then((res) => {
        if (res.data) {
            let successitem = []
            for (let key in res.data) {
                if (res.data[key]) {
                    successitem.push(res.data[key])
                }
            }
            callback(successitem)
        }
    }).catch((err) => {
        console.log(err)
    })
}