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] ！