前情提要

Postman在剛問世時，主要想要應用的場景就是快速的呼叫API，透過各種操作來達成各種功能。而隨著時代演進，客戶端與伺服器的溝通也不再限於傳統Restful API的形式，像是臉書所設計的GraphQL就是一種相當彈性的資料查詢語言。無關優劣，只是都有各自適合的應用場景，關於GraphQL的探討，可以到這裡看更深度的GraphQL介紹。

今日主題

今天的主題主要想展現Postman也能夠使用GraphQL去獲取想要的資料，只要已經了解Schema以及Query就相當足夠了。Schema可以理解成API的規格，而客戶端只要輸入合法的Query，就能夠獲取到想要的資料。

在開始今天的挑戰之前，別忘了先把 Day 19: GraphQL 複製到自己的工作區喔。

回到自己的工作區，打開今天的資料夾GraphQL，根據文件描述，今天的挑戰是去使用spotify提供的GraphQL，步驟如下:

• 設定GraphQL Schema: 在實際進行query前需要準備好GraphQL Schema，在Postman可以透過昨天章節介紹的那樣，在APIs頁面去新增API

  

  命名為spotify，並選擇GraphQL

  

  接著點選Add Schema

  

  填入以下內容並儲存，儲存後之後就能在之後設定請求時指定此schema

  

  可以複製這裡

  type Query {
      # Just returns "Hello world!"
      hi(message: String = "Hi"): String
      queryArtists(byName: String = "Red Hot Chili Peppers"): [Artist]
  }
  type Artist {
      name: String!
      id: ID
      image: String
      albums(limit: Int = 10): [Album]
  }
  type Album {
      name: String
      id: ID
      image: String
      tracks: [Track]
  }
  type Track {
      name: String!
      artists: [Artist]
      preview_url: String
      id: ID
  }
  

• 新增請求: 回到今天的Colletction，在資料夾GraphQL下新增

  • 命名為graphQL
  • POST https://joyce-spotify-graphql.herokuapp.com/graphql
  • Body選擇GraphQL並且透過下拉選單選擇剛剛設定號的schema spotify並重整
  • 編輯 QUERY: 實際要執行的動作，可以看到$name是變數，用來指定artist，預期會得到該藝人的名字、圖片、以及作品的名字

     query getByArtist($name: String!) {
        queryArtists (byName: $name) {
            name
            image
            albums {
                name
            }
        }
    }
    

  • 編輯 GRAPHQL VARIABLES: 用來指定query時要帶入的變數$name

    {
      "name": "Britney Spears"
    }
    

  編輯完成如下圖

  

  嘗試發送看看，成功的話可以看到如下的結果

  {
      "data": {
          "queryArtists": [
              {
                  "name": "Britney Spears",
                  "image": "https://i.scdn.co/image/ab6761610000e5eb4e7e6ded87a4e0f65b5afcec",
                  "albums": [
                      {
                          "name": "Glory (Deluxe)"
                      },
                      ...
                  ]
              },
              {
                  "name": "Hit Co. Masters",
                  "image": "https://i.scdn.co/image/ab67616d0000b27393dbb31b364072022745cd28",
                  "albums": [
                      {
                          "name": "One Hit Wonders of the 60s"
                      },
                   ...
              }
          ]
       }   
   }
  

• submit: 今天的挑戰要求修改變數以求取得不同德回應，這邊直接使用Hit Co. Masters就可以submit來通過今天的挑戰了。

今日回顧

今天體驗了透過Postman來使用GraphQL，老牌工具也是與時俱進，想想也是，畢竟也是越來越多網站選擇使用GraphQL來提高效率，像是今天體驗的spotify，傳統的Restful API可能會需要到三次請求，先取得藝人id，然後找到他所有專輯，最後去找專輯內的曲目，GraphQL的彈性只需要一次就能取回想要的資料。

延伸閱讀:

• GraphQL
• Spotify GraphQL Console
• Spotify GraphQL Console Github

那麼今天就到這邊，我們明天見~