GraphQL 封装多个请求使得network只有一条请求记录

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