百度上 都是用 node 做服务端 写graphql接口 供给前端使用
这里博主考虑 如果 用node框架 做服务端调用服务端的graphql接口 那么如何写呢
所以 还是会有这种需求的
第一步 下载包 博主第一次的时候 下了很多包 后来发现有个包里面包含了这些常用的 所以 只需要下2个
yarn add apollo-boost graphql -S
然后我把 graphql 的query 和 mutate方法 封装到了 base.js里 方便 其他controller 进行extends
对了 首先 你要先有一个 服务端的graphql 哦 这里 我就不介绍怎么写服务端的 graphql接口了 各种语言 都有
base.js里封装代码
const ApolloBoost = require('apollo-boost'); //引入核心
const fetch = require('node-fetch'); // 引入fetch
const { createHttpLink } = require('apollo-link-http'); // 引入http
const {ApolloClient,InMemoryCache} = ApolloBoost // 引入必须设置的客户端及cache
const client = new ApolloClient({
link: createHttpLink({
uri: "http://192.168.50.82:7001/graphql", // 这个url可以抽取到配置文件里
fetch: fetch,
}),
cache: new InMemoryCache(),
})
调用接口的客户端已经准备好了 下面是封装的方法
// 这个是类似我们熟悉的get请求
gqlQuery(query,variables={}){
const p = new Promise( (resolve) => {
client.query({
query,
variables
}).then((res) => {
resolve(res.data)
})
})
return p
}
// 这个是类似我们熟悉的post请求
gqlMutate(mutation,variables={}){
const p = new Promise( (resolve) => {
client.mutate({
mutation,
variables
}).then((res) => {
resolve(res.data)
})
})
return p
}
基类的方法已经准备好 而且这里 我利用promise形式 方便 外部调用使用async 和await
下面说说如何使用
先准备 我们2个 js文件 里面分别是给query使用的 和 mutate使用的 里面的内容是针对我的graphql后台写的
第一个test1文件
const gql = require('graphql-tag') // 引入graphql
module.exports = {
testQuery: gql `query Query{
test
}`,
testLogin: gql `query login($username:String!,$pwd:String!){
login(username:$username,pwd:$pwd){
status
errorCode
msg
}
}`,
testLogin_m: gql `query testLogin_m($loginModel: LoginModel!){
login_m(loginModel:$loginModel){
status
errorCode
msg
}
}`,
getUserInfo: gql `query getUserInfo($userid: ID!){
getUserInfo(userid:$userid){
id
name
userAvatar
vip
showVip
token
fans {
name
}
}
}`,
getUserShowVip: gql `query ($userid: ID!,$vip:Int){
getUserShowVip(userid:$userid,vip:$vip){
id
name
userAvatar
vip
showVip
token
fans {
name
}
}
}`,
queryUsers: gql `query queryUsers($vip:Int!){
queryUsers(vip:$vip){
name
fans {
name
vip
token
}
}
}`
}
第二个test2文件
const gql = require('graphql-tag') // 引入graphql
module.exports = {
testCreateUser: gql`mutation createUser($name:String,$userAvatar:String,$vip:Int){
createUser(name:$name,userAvatar:$userAvatar,vip:$vip){
errorCode
status
msg
}
}`
}
然后 页面调用
// 引入文件
const { testQuery, testLogin, testLogin_m, getUserInfo, getUserShowVip, queryUsers } = require("./gql/test1");
const { testCreateUser } = require("./gql/test2");
// 调用刚才准备的方法
console.info('*************11111111***************')
const result1 = await this.gqlQuery(testQuery)
console.info(result1)
console.info('*************22222222***************')
const variables1 = {username: 'gq', pwd: '123'}
const result2 = await this.gqlQuery(testLogin,variables1)
console.info(result2)
console.info('*************33333333***************')
const variables2 = {
loginModel: {
username: 'gq',
pwd: '123',
authCode: '321'
}
}
const result3 = await this.gqlQuery(testLogin_m,variables2)
console.info(result3)
console.info('*************44444444***************')
const variables3 = {
userid: 123
}
const result4 = await this.gqlQuery(getUserInfo,variables3)
console.info(result4)
console.info('*************555555555***************')
const variables4 = {
userid: 123,
vip:1
}
const result5 = await this.gqlQuery(getUserShowVip,variables4)
console.info(result5)
console.info('*************666666666***************')
const variables5 = {
vip:1
}
const result6 = await this.gqlQuery(queryUsers,variables5)
console.info(result6)
console.info('*************777777777***************')
const mutation1 = {
vip: 1,
name: 'gq',
userAvatar: '123321'
}
const result7 = await this.gqlMutate(testCreateUser,mutation1)
console.info(result7)
console.info('*************88888888***************')
结束 希望可以帮到你哦