ดาวน์โหลด ticketmaster workshop - ticketmaster workshop ดาวน์โหลดซอร์สโค้ด

ticketmaster workshop

ซอร์สโค้ดอื่น ๆ

ดาวน์โหลด

เวิร์กช็อป Ticketmaster

ฉันเพิ่งบินไปแอลเอและเข้าร่วมเวิร์คช็อป GraphQL ที่ Ticketmaster ซึ่งทุกคนสร้าง JavaScript GraphQL API ทุกคนติดตามโดยใช้ Launchpad ซึ่งเป็นเครื่องมือที่ให้คุณทดลองกับเซิร์ฟเวอร์ GraphQL ในเบราว์เซอร์ของคุณ โชคดีที่เวิร์กช็อปได้รับการบันทึกเอาไว้ คุณจึงสามารถลองทำได้เช่นกัน!

นี่คือสิ่งที่คุณจะได้เรียนรู้:

การเยาะเย้ยสคีมา GraphQL
การแสดงข้อมูลจากอาเรย์
กำลังดึงข้อมูลจาก REST API
การดึงข้อมูลจากจุดสิ้นสุด REST หลายจุดในแบบสอบถาม GraphQL เดียว
สร้าง UI อย่างง่ายด้วย React และ Apollo Client

วิดีโออ้างอิงถึงเอกสาร Quip ที่ฉันเตรียมไว้ แต่เนื้อหาทั้งหมดนั้นได้รับการทำซ้ำที่นี่ใน README นี้ ฉันหวังว่าจะบันทึกเวอร์ชันที่ได้รับการปรับให้เหมาะกับการใช้อินเทอร์เน็ตมากขึ้นอีกครั้งในเร็วๆ นี้ แต่ใครจะรู้ว่าจะต้องใช้เวลานานเท่าใดก่อนที่ฉันจะมีเวลา ฉันก็เลยคิดว่าจะเขียนเรื่องนี้ไว้ก่อน ไปข้างหน้าและดูมัน!

นี่คือบางสิ่งที่คุณต้องทำทันที:

รับคีย์ API ที่นี่: http://developer.ticketmaster.com/
เปิด Launchpad แล้วเข้าสู่ระบบ! https://launchpad.graphql.com/new

ศิลปินคนโปรดของฉัน

และรหัสสถานที่ท่องเที่ยว Ticketmaster API:

แคนซัส: 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
  }

กุญแจคำตอบ

คลิกลิงก์เหล่านี้เพื่อดู API ที่เสร็จสมบูรณ์ใน Launchpad:

ล้อเลียน: https://launchpad.graphql.com/z4lnp9j37
ล้อเลียนรายชื่อศิลปิน : https://launchpad.graphql.com/p380l5rx0
ดึงรายละเอียดศิลปินจาก API: https://launchpad.graphql.com/831vp05qq
ดึงข้อมูลกิจกรรมที่จะเกิดขึ้นจาก API: https://launchpad.graphql.com/9pw9nnkjr
UI พร้อม Expo Snack: https://snack.expo.io/BJpiF0SfW

จุดสิ้นสุด

นี่คือจุดสิ้นสุด REST ใน Ticketmaster API ที่เราต้องการดึงข้อมูล

URL

 // 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 ( ) )