項目中有功能要調用 API，對方 API 用的是 GraphQL 實現，就簡單學了下，感嘆技術進步真快，Facebook 發明的這玩兒咋這麽牛逼，以前前端花很多時間看接口文檔，以及和後端溝通。現在想用什麽接口，傳什麽參數、返回什麽結果，自己去構建，不得不說是API的革命，GraphQL 的語法強大且靈活，IDE智能提示也很棒，入門容易、邊學邊用。

這裏用三個實例演示 GraphQL 應用：

用戶登錄

接收參數：app_key、賬戶名、密碼，參數通過變量賦值，登錄成功返回用戶基本信息和 Token
mutation 是根類型，UserLogin 是操作名稱可省略，後面括號內是參數聲明，Login 是字段對象相當於接口方法，後面括號內是參數賦值，大括號內是需要返回的對象結構和字段

查詢字符串

mutation UserLogin(
  $app_key: String!, 
  $account: String!, 
  $password: String!) {
  Login(app_key: $app_key, account: $account, password: $password) {
    user_id
    token
    user_info {
      user_account
      user_name
      user_nickname
      user_email
      mobile_number
      user_balance(product_id: Enum1)
    }
  }
}
 

變量

{
  "app_key": "pxhd491b991k8q5",
  "account": "test001",
  "password": "123456"
}

用戶提交

接收各種參數，通過變量賦值，執行成功返回一個字符串，在 GraphiQL 中編寫查詢字符串及調試（下圖）

用戶尚未登錄？因為接口要求登錄成功後，以後的請求都要在 Header 中帶上 Token，Edit HTTP Headers 即可

查詢字符串

mutation SubmitBetting($game_id: Int!, 
  $game_type_id: Int
 
!, 
  $game_cycle_id: Int!, 
  $bet_info: String!, 
  $bet_mode: BetModeEnum,
  $bet_multiple: Int!,
  $bet_percent_type: BetPercentTypeEnum!,
  $is_follow: Boolean,
  $follow_commission_percent: Int,
  $follow_secret_type: Int
) {
  AddLotteryOrder(
    game_id: $game_id, 
    game_type_id: $game_type_id, 
    game_cycle_id: $game_cycle_id, 
    bet_info: $bet_info, 
    bet_mode: $bet_mode, 
    bet_multiple: $bet_multiple, 
    bet_percent_type: $bet_percent_type, 
    is_follow: $is_follow, 
    follow_commission_percent: $follow_commission_percent, 
    follow_secret_type: $follow_secret_type)
}

變量

{
  "game_id":1,
  "game_type_id":1,
  "game_cycle_id": 1892309,
  "bet_info": "",
  "bet_mode": "TwoYuan",
  "bet_multiple": 1,
  "bet_percent_type": "NoPercentType",
  "is_follow": false,
  "follow_commission_percent": 0,
  "follow_secret_type": 0
}

活動列表

接收一個條件對象 input，成功返回記錄列表，根類型是 query 可省略，在 GraphiQL 中編寫查詢字符串及調試（下圖）

查詢字符串，這個接口只有整形和布爾型查詢參數，我就沒使用變量（如果是字符串參數最好使用變量，因為參數值中含有引號，會引起查詢字符串語法錯誤，甚至註入風險）。

{
  ActivityList(input: {is_show_menu: True, page: 1, rows_of_page: 20}) {
    record {
      id
      title
      content
      web_title_img_url
      app_title_img_url
      web_menu_img_url
      app_menu_img_url
    }
  }
}

通過 HTTP 提供服務

傳遞三個參數分別是：

query：查詢文檔，必填，我們之前在 GraphiQL 中已調試好。
variables：變量，選填，鍵值對集合。
operationName：操作名稱，選填，查詢文檔有多個操作時必填。

GET的話，放在 URL 參數中，格式：
?query=查詢語句&operationName=操作名稱&variables=變量集合

POST的話，首先在 Header 中聲明 Content-Type: application/json，正文 JSON 片段：
{
　　"query": "{viewer{name}}", //查詢字符串
　　"operationName": "", //操作名稱，選填，查詢文檔有多個操作時必填
　　"variables": { "name": "value", ... } //對象集合，選填
}

下面截圖是在 Postman 中調試接口

看上去沒問題，可以將HTTP請求封裝，放進項目中

我只學了些皮毛，當然一般的項目也不會用太復雜的語法，以後有機會再學學服務端的配置。

邊學邊做，簡單的 GraphQL 實例