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文件中引入使用

3:控制台请求

根据图2、3可见，虽然查询了两个人的openid，但是控制台只发起了一个请求。返回结果中也根据query语句返回了两个请求结果。如果某一个请求发生错误，会在对应请求结果中返回错误信息，并不会污染其他请求。

相对于promise.all更加提升性能，也更便于错误定位及处理。