0.1.4 • Published 3 years ago
graphql-miniapp v0.1.4
graphql-miniApp
安装
npm i graphql-miniapp
快速开始
通过微信开发者工具“构建npm”完成后引入
import { graphqlMiniApp, gql } from 'graphql-miniapp';
const graphql = new graphqlMiniApp('http://127.0.0.1:3000');
const query = gql`
query {
getAllBall{
period
}
}`
graphql.request({ url: '/graphql', query }).then(res => {console.log(res)}).catch(err => {console.error(err)})
用法
import { graphqlMiniApp, gql } from 'graphql-miniapp';
//创建一个Graphql客户端实例来发送请求
const graphql = new graphqlMiniApp('http://127.0.0.1:3000', { headers, method, InMemoryCache });
graphql.request({ url, query, operationName, variables, baseURL, headers, method, noCache,timeout,dataType,responseType}).then().catch()
示例
向header中添加内容
import { graphqlMiniApp, gql } from 'graphql-miniapp';
const baseURL = 'http://127.0.0.1:3000';
const graphql = new graphqlMiniApp(baseURL, {
headers: {
authorization: 'Bearer TOKEN',
}
});
const query = gql`
query {
getAllBall{
period
}
}`
graphql.request({ url: '/graphql', query }).then(res => {}).catch(err => {})
为某个请求中单独设置请求头
import { graphqlMiniApp, gql } from 'graphql-miniapp';
const graphql = new graphqlMiniApp(baseURL, {
headers: {
authorization: 'Bearer TOKEN',
}
});
graphql.request({ url, query, headers: { 'X-AUTH-TOKEN': 'TOKEN' } }).then().catch()
为某个请求单独设置请求地址
import { graphqlMiniApp, gql } from 'graphql-miniapp';
const graphql = new graphqlMiniApp('http://127.0.0.1:3000');
graphql.request({ url,baseURL: 'http://api.test.com' }).then().catch()
使用GraphQL文档变量
import { graphqlMiniApp, gql } from 'graphql-miniapp';
const graphql = new graphqlMiniApp(endPoint);
const query = gql`
query GetAllBall($blueBall: Int!){
getAllBall(blueBall: $blueBall){
redBall
period
blueBall
}
}
`
const variables = {
blueBall: 10
}
graphql.request({ url, query, variables }).then().catch()
GraphQL Mutations
import { graphqlMiniApp, gql } from 'graphql-miniapp';
const graphql = new graphqlMiniApp('http://127.0.0.1:3000');
const mutation = gql`
mutation AddOnePerios($redBall:[Int]!,$blueBall:Int!,$date:String!,$perios:String!){
addOnePerios(post: {redBall: $redBall,blueBall: $blueBall,date: $date,perios: $perios})
}
`
const variables = {
redBall: [1, 2, 3, 4, 5, 6], blueBall: 12, date: "2021-03-19", perios: "100"
}
graphql.request({ url, mutation, variables }).then().catch()
使用拦截器
request拦截器
import { graphqlMiniApp, gql } from 'graphql-miniapp';
const graphql = new graphqlMiniApp('http://127.0.0.1:3000');
graphql.interceptors.request.use(function (config) {
//使用拦截器为所有请求添加统一的header
config.headers['X-auth-token'] = 'interceptors'
return config
}, function (err) {
console.log('请求出错了', err)
})
const query = gql`
query {
getAllBall{
period
}
}`
graphql.request({ url: '/graphql', query }).then(res => {}).catch(err => {})
使用respons拦截器
import { graphqlMiniApp, gql } from 'graphql-miniapp';
const graphql = new graphqlMiniApp('http://127.0.0.1:3000');
graphql.interceptors.response.use(function (result, resolve, reject) {
//所有2xx的http响应都会经由这个函数
//对result做些什么,然后返回
result.data.id===Math.random().toString(32).substring(2)
return result;
//也可以通过调用resolve提前结束当前请求。或者调用reject将当前请求转为错误请求。
if (data.data.code != 0) {
reject({ err: 'code error' })
}else {
resolve(result.data)
}
}, function (err) {
console.log('结果出错了', err)
})
const query = gql`
query {
getAllBall{
period
}
}`
graphql.request({ url: '/graphql', query }).then(res => {}).catch(err => {})
移除拦截器
import { graphqlMiniApp } from 'graphql-miniapp';
const graphql = new graphqlMiniApp('http://127.0.0.1:3000');
//通过拦截器返回的id可以删除某个拦截器
const myInterceptor = graphql.interceptors.request.use((config) => {return config})
graphql.interceptors.request.eject(myInterceptor)
使用内存缓存
通过创建实例时向graphqlMiniApp
类的option
参数设置InMemoryCache:true
启用内存缓存功能。
此功能原理是,通过将请求参数md5后的值与该请求返回值组合为键值对。后续遇到同一个请求直接从内存缓存中获取。
在request
方法中向option
设置noCache:true
可以不使用内存缓存中的值。而重新从接口获取。
api
graphqlMiniApp(url,option)
//实例的请求根地址,必填项
url:'https://github.com'
{
//实例的默认请求类型
method:'POST'
//实例请求头
headers:{}
//是否使用内存缓存功能
InMemoryCache:true
//接口超时时间
timeout:6000
}
request(config})
{
//请求接口
url:'/graphql'
//请求根路径
baseURL:'https://github.com'
//请求类型
method:'POST'
//请求头
headers:{}
//graphql query查询语句
query:''
//graphql 文档变量
variables:{}
//graphql mutation语句
mutation:''
//不使用内存缓存中的值,而是从接口重新获取
noCache:true
//超时时间
timeout:6000
//返回的数据格式 参考微信wx.request文档
dataType:json
//响应的数据格式 参考微信wx.request文档
responseType:'text'
}