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

2024年2月16日 373次阅读 来源: PETER

前端请求后端数据，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，这就是要点，还是要和后端字符串一一对应！

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

    原文作者：PETER
    原文地址: https://segmentfault.com/a/1190000019586579
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞