Ready to get in the driver's seat for your next mission?

In this project-focused activity, you'll be using everything you've learned so far from Intro to GraphQL with TypeScript & Apollo Server!

Before going any further, make sure you know:

• How to write Schema Definition Language (SDL)
• How to access data sources from resolver methods

You'll also need to use these technologies:

• NodeJS
• Apollo Server

If you're comfortable with those, great! You'll be able to continue working on our music catalog application.

You'll carry this feature from start to finish, building onto the schema, writing data source methods to connect to a REST API, and implementing resolvers.

This project picks up where Intro to GraphQL with TypeScript & Apollo Server finishes, but you can certainly jump right into it if you're up for it!

The app so far...

Right now, we can query our music catalog app, MusicMatcher, for featured playlists and a particular playlist. Along with data about the playlist itself, we can also see more detail about the tracks that each playlist contains.

In this hands-on lab, you'll complete the steps to bring the next feature into our GraphQL API. We're going to expand our music catalog application with artists. ✨

If you haven't completed the course, clone the project starter repo using the command below:

Project structure

Our project is a fully-functional, backend server application.

Here's a look at the file structure. The entrypoint of our server is the src/index.ts file. Our project is preconfigured to generate TypeScript types from the GraphQL schema, which are outputted in src/types.ts.

Next, open a terminal in the root of your application and run the following command to install dependencies and launch the server.

When the installation is complete, we should see some output that our server is running on http://localhost:4000.

Setting up the Explorer

To test queries on our GraphQL server, let's open up Apollo Sandbox at studio.apollographql.com/sandbox. When it loads, connect it to where the server is running at http://localhost:4000.

Let's try out a query to get a list of featured playlists. Copy the query below, paste it into the Explorer's Operations panel, then run it. You should get a list of playlists, along with their tracks, in the Response panel on the right-hand side.

You can also try building the query yourself by typing it out manually, or using the plus (⊕) buttons on the left sidebar to add each field.

The objective

Your mission is to expand this GraphQL API with artist data. By the end of the lab, you'll be able to run queries that include a track's artist details. This will consist of the following steps:

• Updating the schema to include a new artist type
• Building out the data source method to retrieve artist data
• Defining the resolvers to return artist data for a particular track.

Alright, time to get your hands dirty! The next few lessons provide hints and guides to what you'll need to do. If you get stuck, you can refer to the final branch of the repo, or you can reveal the code solution for each section. Click on the "Show code" button below to take a peek:

Ready to get started? Off you go!