百度上 都是用 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***************')
結束 希望可以幫到你哦