Odyssey

Growing your GraphQL API with TypeScript & Apollo Server
deprecated

Project setupAdding the Artist typeThe Artist data sourceUpdating the Track modelAdding the resolverWrapping up
6. Wrapping up
3m

It's the moment of truth!

🎯 Your goal for this step:

Run a query that retrieves a playlist, its tracks, and their artist data all at once

A mockup of an artist view, showing name, followers, genres and a link URI

Use the following playlist ID when completing these tasks.

A playlist ID
6LB6g7S5nc1uVVfj00Kh6Z
Sandbox tasks

Solution: Wrapping up

query GetPlaylist($playlistId: ID!) {
  playlist(id: $playlistId) {
    id
    name
    tracks {
      id
      name
      durationMs
      artist {
        name
        followers
      }
    }
  }
}

The error:

404 Not Found

How to fix it:

Double check that you've used the correct endpoint in your artist request to the Spotify REST API. There shouldn't be a / preceding the specified endpoint.

async getArtist(artistId: string): Promise<ArtistModel>{
  return this.get<ArtistModel>(`artists/${artistId}`);
}

The error:

Property 'XYZ' does not exist on type 'Promise<ArtistModel>'

How to fix it:

Check out your Track.artist resolver function and make sure that it's an async function that awaits the results of the call to the data source.

resolvers.ts
artist: async ({artists}, _, { dataSources }) => {
  const artist = artists?.[0];
  
  // ...check for artist existence
  
  const { followers, name, id, uri, genres } = await dataSources.spotifyAPI.getArtist(artist.id);
  
  // ... remainder of resolver
}

If this doesn't solve the problem, make sure that your ArtistModel in model.ts is correct.

models.ts
// Represents an artist object returned by the REST API's /artists endpoint
export type ArtistModel = {
  id: string;
  name: string;
  genres: string[];
  uri: string;
  followers: { total: number },
}

Still having trouble? Visit the Odyssey forums to get help.

Who is the artist for track 'Lemon Tree' in the query response?

You did it!

Fantastic job completing this server-side lab. You've tackled from start to finish the task of bringing in a new feature to our GraphQL API. From the schema to the resolver, the Artist type is now part of our music catalog app.

But what better way to end a solo mission than with another challenge? Check out the implementation of the Track.artist resolver, and see if you notice something in need of a performance tune-up...

Then, keep an eye out for the next course in the TypeScript series: Data Loaders with TypeScript & Apollo Server. The journey continues!

Previous

Share your questions and comments about this lesson

Your feedback helps us improve! If you're stuck or confused, let us know and we'll help you out. All comments are public and must follow the Apollo Code of Conduct. Note that comments that have been resolved or addressed may be removed.

You'll need a GitHub account to post below. Don't have one? Post in our Odyssey forum instead.

              query

              A request for specific data from a GraphQL server. Clients define the structure of the response, enabling precise and efficient data retrieval.

              resolver

              A function that populates data for a particular field in a GraphQL schema. For example:

              const resolvers = {
                Query: {
                  author(root, args, context, info) {
                    return find(authors, { id: args.id });
                  },
                },
              };
              GraphQL

              An open-source query language and specification for APIs that enables clients to request specific data, promoting efficiency and flexibility in data retrieval.

              resolver

              A function that populates data for a particular field in a GraphQL schema. For example:

              const resolvers = {
                Query: {
                  author(root, args, context, info) {
                    return find(authors, { id: args.id });
                  },
                },
              };
              resolver

              A function that populates data for a particular field in a GraphQL schema. For example:

              const resolvers = {
                Query: {
                  author(root, args, context, info) {
                    return find(authors, { id: args.id });
                  },
                },
              };
              Apollo Server

              An open-source library for server-side GraphQL operation handling. It can be used as a monolithic GraphQL server or a subgraph server within a supergraph.

              NEW COURSE ALERT

              Introducing Apollo Connectors

              Connectors are the new and easy way to get started with GraphQL, using existing REST APIs.

              Say goodbye to GraphQL servers and resolvers—now, everything happens in the schema!

              Take the course