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

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

---

到这里，你已经能够完美获取后端数据。
感谢你们的支持！！