ticketmaster workshop

票務大師工作坊

我最近飛往洛杉磯，在 Ticketmaster 舉辦了一個 GraphQL 研討會，每個人都建立了一個 JavaScript GraphQL API。每個人都使用 Launchpad，這是一個可以讓您在瀏覽器中試驗 GraphQL 伺服器的工具。值得慶幸的是，研討會被錄製下來，所以你也可以嘗試！

您將學到以下：

1. 模擬 GraphQL 模式
2. 顯示數組中的數據
3. 從 REST API 取得
4. 在一個 GraphQL 查詢中從多個 REST 端點取得
5. 使用 React 和 Apollo Client 建立簡單的 UI

該影片引用了我準備的 Quip 文檔，但所有內容均在本自述文件中複製。我希望盡快重新錄製一個更適合網路消費的版本，但誰知道要等多久我才有時間，所以我想我應該先把它放上來。快來觀看吧！

以下是您需要立即執行的一些操作：

• 在此處取得 API 金鑰：http://developer.ticketmaster.com/
• 開啟啟動板並登入！ https://launchpad.graphql.com/new

我最喜歡的藝術家

及其 Ticketmaster API 景點 ID：

• 堪薩斯州： K8vZ9171C-f
• 莉爾遊艇： K8vZ9174v57
• 賈森·瑪拉茲： K8vZ9171CVV

所需查詢

這是我們希望能夠從新的 GraphQL API 取得的查詢：

{
  myFavoriteArtists {
    id ,
    name
    image
    twitterUrl
    events {
      name
      image
      startDateTime
    }
  }
}

所需的架構

這是一個將滿足上述查詢的模式：

  type Query {
    myFavoriteArtists : [ Artist ]
  }

  type Artist {
    id : ID
    name : String
    image : String
    twitterUrl : String
    events : [ Event ]
  }

  type Event {
    name : String
    image : String
    startDateTime : String
  }

答案關鍵

按一下這些連結以在 Launchpad 中查看完成的 API：

• 嘲笑：https://launchpad.graphql.com/z4lnp9j37
• 嘲笑藝術家列表：https://launchpad.graphql.com/p380l5rx0
• 從 API 取得藝術家詳細資訊：https://launchpad.graphql.com/831vp05qq
• 從 API 取得即將發生的事件：https://launchpad.graphql.com/9pw9nnkjr
• 帶有 Expo Snack 的 UI：https://snack.expo.io/BJpiF0SfW

端點

這些是我們要從中取得的 Ticketmaster API 中的 REST 端點。

網址

 // Look up artist details
`https://app.ticketmaster.com/discovery/v2/attractions/ ${ id } .json?apikey= ${ context . secrets . TM_API_KEY } `

// Look up events for an artist
`https://app.ticketmaster.com/discovery/v2/events.json?size=10&apikey= ${ context . secrets . TM_API_KEY } &attractionId= ${ id } `

程式碼

 // Artist details
return fetch ( `https://app.ticketmaster.com/discovery/v2/attractions/ ${ id } .json?apikey= ${ context . secrets . TM_API_KEY } ` )
  . then ( res => res . json ( ) )

// Events
return fetch ( `https://app.ticketmaster.com/discovery/v2/events.json?size=10&apikey= ${ context . secrets . TM_API_KEY } &attractionId= ${ id } ` )
  . then ( res => res . json ( ) )

Ticketmaster API 的詳細資料文件：http://developer.ticketmaster.com/products-and-docs/apis/discovery-api/v2/#attraction-details-v2

工作坊

如果您有興趣在您的公司舉辦這樣的 GraphQL 研討會，請隨時發送電子郵件至[email protected] ！