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

---

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