前端请求graphql的数据格式之我见

zehuawong 2019-11-08

前端请求后端数据,vue-cli用graphql的方法去请求:

刚开始我们用ajax,axios去请求后端数据,无往不利。
可是,在某一天,突然,要用graphql来请求数据!


心里一慌,没事,来者不拒。

第一步:我们定义一个新的js,xxx.js:

import gql from "graphql-tag";
export const getApoVal = {
    xxxName: gql`
    query {
      xxxBackName{
        name
        age
      }
    }
  `,
}

上面就是类似get请求了。
xxxName:随便起一个名字;
xxxBackName:这是后端的字符串名字;
name,age:后端传过来的属性名字。
后端的字符串一定要一一对应,不对应就会报红色的error,哈哈哈!

  • 有参数怎么办?
export const getApoVal = {
    xxxName: gql`
    query APIQuery($page: Int, $pageSize: Int){
      xxxBackName(page: $page, pageSize: $pageSize){
        name
        age
      }
    }
  `,
}

完美解决你的get方法参数问题。

第二步,教你post方法获取:

export const submitApoVal= {
    xxxName: gql`
    mutation APIMutation($page: Int, $pageSize: Int){
      xxxBackName(page: $page, pageSize: $pageSize){
        name
        age
      }
    }
  `,
}

是不是很简单?
query改成mutation,这就是要点,还是要和后端字符串一一对应!


到这里,你已经可以完美获取后端数据。
感谢大家的支持!!

相关推荐