邊學邊作，簡單的 GraphQL 實例

項目中有功能要調用 API，對方 API 用的是 GraphQL 實現，就簡單學了下，感嘆技術進步真快，Facebook 發明的這玩意兒咋這麼牛逼，使前端開發人員變得主動起來，想要什麼接口、返回什麼結果，能夠本身經過查詢構建，而不是之前被動接受 RESTful API 標準，不得不說是 API 的革命，GraphQL 的語法強大且靈活，IDE智能提示也很棒，入門容易、邊學邊用。

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

用戶登陸

接收參數：app_key、帳戶名、密碼，參數經過變量賦值，登陸成功返回用戶基本信息和 Token
mutation 是根類型，UserLogin 是操做名稱可省略，後面括號內是參數聲明，Login 是字段對象至關於接口方法，後面括號內是參數賦值，大括號內是須要返回的對象結構和字段
在 GraphiQL 中編寫查詢字符串及調試（下圖）

查詢字符串

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)
    }
  }
}

GraphQL Query String

變量

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

GraphQL Variables

 

用戶提交

接收各類參數，經過變量賦值，執行成功返回一個字符串，在 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)
}

GraphQL Query String

變量

{
  "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
}

GraphQL Variables

 

活動列表

接收一個條件對象 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
    }
  }
}

GraphQL Query String

 

經過 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請求封裝，放進項目中

我只學了些皮毛，固然通常的項目也不會用太複雜的語法，之後有機會再學學服務端的配置。