微信小程序开发之使用GraphQl

2019-06-1014:18:27APP与小程序开发Comments7,503 views字数 1339阅读模式

写了小程序,想顺便学习graphql,实践。于事有了本篇教程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13556.html

Apollo

Apollo是一整套的关于GraphQl的工具套件吧,各种后台语言java、php、nodej的都有,关于前端框架封装GraphQl,让GraphQl使用更简单,更优化的库类也都有。vue、react等。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13556.html

小程序

但小程序不同传统的网页。小程序是无浏览器环境的,而且也没ajax用的是自己的api。很显然apollo这么好的社区出的这么好的工具在小程序上根本没法用啊。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13556.html

毕竟小程序比较小众,想用的话就只能自己折腾了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13556.html

原理

其实GraphQl请求跟Restfel api的请求一样,都是一个http请求。只是GraphQl的请求入口有且只有一个,一般是graphql服务端的入口,一般是/graphql 而且是post放,所有。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13556.html

所以GraphQl请求无非就是post方法的http://xxxx.com/graphql的请求后台再传这graphql的参数来使graphql服务端根据参数不同来执行不同的方法,从而实现不同的接口效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13556.html

搞清这原理就可以慢慢折腾了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13556.html

开始

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哦。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13556.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/xcx/13556.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定