yizhi-graphql-query-loader

适用于webpack的graphql加载器

仅适用于个人矿建，其他框架不要安装

安装

npm install --save yizhi-graphql-query-loader

graphql查询语句格式

下面是一个例子

# 这里是注释
query login($number:String!, $password:String!) {
    user {
        token(number:$number, password:$password)
    }
}

mutation test {
    users{
        id
        number
        name
    }
}

那么经过解析之后，会得到这样的结果：

{
    login:[Function],
    test:[Function]
}

需要注意的是名称不要重复，否则会被后面的名称覆盖

使用

const apis = require('./apis.gql')
apis.login({number:"admin", password:"123456"}, (err, result)=>{
    //
})
apis.test({}, (err, result)=>{
    //
})

处理ajax请求

loader提供的只是语法的转换，并不提供具体的网络请求，因此，如果没有ajax，那么是无法请求服务器的，所以你需要定义一个自己的ajax请求方式，并作为window的变量，具体定义如下：

interface GAjax {
    /**
     * 提交graphql
     * @param gql graphql查询语句
     * @param argv 查询参数
     * @param callback 查询回调函数
     */
    post(gql: string, argv: { [i: string]: any }, callback?: (error: Error | null, data?: any)=> void): void
 
    //如果希望支持promise，可以这样定义
    //post(gql: string, argv: { [i: string]: any }): Promise<any>
 
    //一般来说还应该提供其他的函数来进行ajax配置，如url地址配置，token设置，缓存控制等等。
}
 
interface Window {
    /** 用于处理graphql的ajax */
    gajax: GAjax
}

你可以参考src/ajax.ts文件（只做参考）

typing生成

你可以通过调用parser.ts提供的parseGQL函数来对graphql进行解析，解析之后会得到这样的结果：

//参数信息
interface ArgInfo {
    name: string			//参数名称
    type: string			//参数类型
    required: boolean		//是否非空
}
 
//gql信息
interface GQLInfo {
    method: 'query' | 'mutation'	//gql请求方式
    func: string					//函数名
    args: ArgInfo[]					//参数列表
    text: string					//具体的字符串
}
 
//这个就是转换结果了
type ParseResult = Array<GQLInfo>

通过这个结果就能生成想要的typing文件了，你甚至可以通过转换结果生成ts文件（这样也就用不到webpack的loader了）