ticketmaster workshop

Ticketmaster-Workshop

Ich bin kürzlich nach LA geflogen und habe einen GraphQL-Workshop bei Ticketmaster durchgeführt, bei dem jeder eine JavaScript-GraphQL-API erstellt hat. Alle folgten mit Launchpad, einem Tool, mit dem Sie mit GraphQL-Servern in Ihrem Browser experimentieren können. Zum Glück wurde der Workshop aufgezeichnet, sodass Sie ihn auch ausprobieren können!

Folgendes werden Sie lernen:

1. Verspotten eines GraphQL-Schemas
2. Daten aus einem Array anzeigen
3. Abrufen von einer REST-API
4. Abrufen von mehreren REST-Endpunkten in einer GraphQL-Abfrage
5. Erstellen einer einfachen Benutzeroberfläche mit React und Apollo Client

Das Video verweist auf ein Quip-Dokument, das ich erstellt habe, aber der gesamte Inhalt ist hier in dieser README-Datei wiedergegeben. Ich hoffe, dass ich bald eine Version davon neu aufnehmen kann, die besser für den Internetkonsum optimiert ist, aber wer weiß, wie lange es dauern wird, bis ich Zeit habe, also dachte ich, ich würde das zuerst veröffentlichen. Schauen Sie es sich an!

Hier sind einige Dinge, die Sie sofort tun müssen:

• Holen Sie sich hier einen API-Schlüssel: http://developer.ticketmaster.com/
• Öffnen Sie Launchpad und melden Sie sich an! https://launchpad.graphql.com/new

Meine Lieblingskünstler

Und ihre Ticketmaster-API-Attraktions-IDs:

• Kansas: K8vZ9171C-f
• Lil Yachty: K8vZ9174v57
• Jason Mraz: K8vZ9171CVV

Gewünschte Abfrage

Dies ist die Abfrage, die wir von unserer neuen GraphQL-API abrufen möchten:

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

Gewünschtes Schema

Dies ist ein Schema, das die obige Abfrage erfüllt:

  type Query {
    myFavoriteArtists : [ Artist ]
  }

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

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

Der Antwortschlüssel

Klicken Sie auf diese Links, um die fertigen APIs in Launchpad anzuzeigen:

• Verspottet: https://launchpad.graphql.com/z4lnp9j37
• Verspottet mit Künstlerliste: https://launchpad.graphql.com/p380l5rx0
• Rufen Sie Künstlerdetails von der API ab: https://launchpad.graphql.com/831vp05qq
• Rufen Sie bevorstehende Ereignisse von der API ab: https://launchpad.graphql.com/9pw9nnkjr
• Benutzeroberfläche mit Expo Snack: https://snack.expo.io/BJpiF0SfW

Endpunkte

Dies sind die REST-Endpunkte in der Ticketmaster-API, von denen wir abrufen möchten.

URLs

 // 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 } `

Code

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

Detaillierte Dokumente aus der Ticketmaster-API: http://developer.ticketmaster.com/products-and-docs/apis/discovery-api/v2/#attraction-details-v2

Workshops

Wenn Sie daran interessiert sind, einen solchen GraphQL-Workshop in Ihrem Unternehmen durchzuführen, zögern Sie nicht, mir eine E-Mail an [email protected] zu senden!