yizhi-graphql-query-loader v1.0.6

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了）