前端請求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，這就是要點，仍是要和後端字符串一一對應！

---

到這裏，你已經能夠完美獲取後端數據。
感謝你們的支持！！