nodejs 使用調用graphql接口(不是寫服務端,而是調用接口)

百度上 都是用 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***************')

結束  希望可以幫到你哦

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章