gql-api-loader
v0.3.1
Published
自动请求生成 graphql 请求的 webpack loader
Downloads
3
Readme
Graphql Api Loader
自动请求生成 graphql 请求的 webpack loader
使用方法
安装
npm install --save-dev gql-api-loader
使用步骤
1. webpack loader 配置
在 webpack 配置中加上 gql-api-loader
的配置
{
// ... 其他配置
module: {
rules: [
{
test: /\.(graphql|gql)$/,
// use: { loader: 'gq-loader'}, // 最简单配置
use: { loader: 'gql-api-loader'
options: { // 选项
endpoint: '/graphql' // 可选,该值可以再运行时改变,这里可以理解为是一个默认值
}
}
}
]
}
}
loader 的 options 可选项为
{
raw: false, // 如果为true,直接导出 graphql 查询语句,已自动解析 Fragment 依赖,如果为false,导出可直接执行的查询函数,默认为false
debug: false, // 调试模式
endpoint: '/graphql', // 默认的 graphql url,可以在运行时更改
}
2. 编写 .graphql 文件
示例
fragment.graphql
定义共用的部分
fragment userFields on User {
uid
userName
}
业务接口,先导入 fragment.graphql
,然后定义两个查询
#import './fragment.gql'
query check {
me {
...userFields
nickName
}
}
mutation create($param: UserParam) {
userCreate(input: $param) {
...userFields
nickName
}
}
在业务代码中引用,调用接口
import gqlConfig from 'gql-api-loader/lib/config'
gqlConfig({
endpoint: 'http://127.0.0.1:9000/gql', // graphql 的 url
credentials: 'include', // fetch 参数的 credentials 配置,是否携带 cookies
headers: { Authorization: 'Beare XXXXXXXXXXXXXX' }, // 可以配置请求的headers
fetch: (url, options) => window.fetch(url, options), // 完全自己定义请求函数,参数与 window.fetch 一致
})
import user from './user.graphql'
;(async function(){
const { me } = await user.check() // 直接请求
console.log(me)
const {userCreate: userinfo} = await user.create({input: {userName: 'eyas'}}) // 参数要以object形式传入
console.log(userinfo)
})()