微信小程序开发之使用GraphQl

写了小程序，想顺便学习graphql，实践。于事有了本篇教程

Apollo

Apollo是一整套的关于GraphQl的工具套件吧，各种后台语言java、php、nodej的都有，关于前端框架封装GraphQl，让GraphQl使用更简单，更优化的库类也都有。vue、react等。

小程序

但小程序不同传统的网页。小程序是无浏览器环境的，而且也没ajax用的是自己的api。很显然apollo这么好的社区出的这么好的工具在小程序上根本没法用啊。

毕竟小程序比较小众，想用的话就只能自己折腾了。

原理

其实GraphQl请求跟Restfel api的请求一样，都是一个http请求。只是GraphQl的请求入口有且只有一个，一般是graphql服务端的入口，一般是/graphql 而且是post放，所有。

所以GraphQl请求无非就是post方法的http://xxxx.com/graphql的请求后台再传这graphql的参数来使graphql服务端根据参数不同来执行不同的方法，从而实现不同的接口效果。

搞清这原理就可以慢慢折腾了。

开始

var Fly=require("../lib/wx.js") //wx.js is your downloaded code
var fly=new Fly(); //Create an instance of Fly
import message from './message'
import { create_client } from 'tiny-graphql-client'

const client =create_client( async( body)=>{
  const res_data = await fly.post("/graphql",body)
  const {data ,errors}=res_data;
  if(errors){
    message.error(errors[0].message);
    throw errors;
  }
  return res_data.data;
})

export default client;

• fly是一个兼容小程序的http组件，你可以使用原生的request来替换。
• tiny-graphql-client 是一别人封装好的graphql工具类，详情：https://github.com/xialvjun/tiny-graphql-client
• graphql返回的字段，一定会有data，无论成功后失败。只是有错误失败时才会有errors字段。所以我们在全局处理graphql返回时先判断有没有errors字段的存在，有就是有错误。没有就是成功了。

使用

query

user=await this.$parent.client.run(`query getUser{getUser{id nickName avatarUrl space nowSpace album}}`);

mutation

let bucket=await this.$parent.client.run(`mutation createBucket($name:String!){createBucket(name:$name){id name createdAt}}`,this.album);

使用前记得先引入上面封装好的client哦。