I recently flew down to LA and did a GraphQL workshop at Ticketmaster where everyone built a JavaScript GraphQL API. Everyone followed along using Launchpad, a tool that lets you experiment with GraphQL servers in your browser. Thankfully, the workshop was recorded, so you can try it too!
Here's what you'll learn:
- Mocking a GraphQL schema
- Displaying data from an array
- Fetching from a REST API
- Fetching from multiple REST endpoints in one GraphQL query
- Building a simple UI with React and Apollo Client
The video references a Quip document I prepared, but all of that content is reproduced here in this README. I hope to re-record a version of this more optimized for internet consumption soon, but who knows how long it will be before I have time, so I thought I'd put this up first. Go ahead and watch it!
Here are some things you'll need to do right away:
- Get an API key here: http://developer.ticketmaster.com/
- Open Launchpad and log in! https://launchpad.graphql.com/new
And their Ticketmaster API attraction IDs:
- Kansas:
K8vZ9171C-f
- Lil Yachty:
K8vZ9174v57
- Jason Mraz:
K8vZ9171CVV
This is the query we want to be able to fetch from our new GraphQL API:
{
myFavoriteArtists {
id,
name
image
twitterUrl
events {
name
image
startDateTime
}
}
}
This is a schema that will fulfill the above query:
type Query {
myFavoriteArtists: [Artist]
}
type Artist {
id: ID
name: String
image: String
twitterUrl: String
events: [Event]
}
type Event {
name: String
image: String
startDateTime: String
}
Click on these links to see the finished APIs in Launchpad:
- Mocked: https://launchpad.graphql.com/z4lnp9j37
- Mocked with list of artists: https://launchpad.graphql.com/p380l5rx0
- Fetch artist details from API: https://launchpad.graphql.com/831vp05qq
- Fetch upcoming events from API: https://launchpad.graphql.com/9pw9nnkjr
- UI with Expo Snack: https://snack.expo.io/BJpiF0SfW
These are the REST endpoints in the Ticketmaster API we want to fetch from.
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())
Details docs from the Ticketmaster API: http://developer.ticketmaster.com/products-and-docs/apis/discovery-api/v2/#attraction-details-v2
If you are interested in getting a GraphQL workshop like this at your company, don't hesitate to email me at sashko@apollodata.com
!