12. Code-Along: Finishing the home page query
3m

Goal

Finish the Track.author resolver, so that we can run the full query for the home page:

query GetTracksForHomepage {
tracksForHome {
id
title
thumbnail
length
modulesCount
author {
id
name
photo
}
}
}

Code-Along

Step 1: Add a resolver skeleton to the resolver map

Start by setting up a skeleton for the Track.author resolver in the resolver map:

src/resolvers.js
export const resolvers = {
Query: {
tracksForHome: (parent, args, {dataSources}) => {
return dataSources.catsAPI.getAllTracks();
}
},
Track: {
author: () => {}
}
};

Step 2: Find the data source method that returns the data we need

Our schema tells us that the Track.author field should return an Author. And an Author type has fields for an author's id, name, and photo.

Looking at the CatsAPI data source, which of these methods gives us back the data we need?

  • Resource: Catstronauts REST API

Step 3: Use the data source method in our resolver function to return the correct data for that field.

Inside the Track.author resolver, get the dataSources object out of the context parameter, and then call the getAuthor method:

src/resolvers.js
export const resolvers = {
Query: {
// ...
},
Track: {
author: (parent, args, {dataSources}) => {
return dataSources.catsAPI.getAuthor(/* ??? */);
}
}
};

But wait. We need to pass in an author id into the getAuthor method. Where will we get that data from?

The parent parameter

The parent parameter contains the return value for this field's parent resolver. In other words, the return value of the previous resolver in the resolver chain.

The resolver chain

Let's take a closer look at what happens under the hood when our server tries to resolve this query:

query Query {
tracksForHome {
author {
name
}
}
}
  1. First, the tracksForHome resolver is called. This function returns an array of Track objects.
  2. Our query asks for each track's author field. So now the Track.author resolver function gets called, once for each track returned by tracksForHome.
    • The Track object from tracksForHome gets passed into the parent parameter of the Track.author resolver function.
  3. The Track.author resolver returns an Author object based on the parent track passed in.
TODO: alt text

Resources:

Code-Along (continued)

Let's take a closer look at the parent parameter inside the Track.author resolver:

src/resolvers.js
export const resolvers = {
Query: {
tracksForHome: (parent, args, {dataSources}) => {
return dataSources.catsAPI.getAllTracks();
}
},
Track: {
author: (parent, args, {dataSources}) => {
console.log(parent);
return dataSources.catsAPI.getAuthor(/* ??? */);
}
}
};

Run the query in Sandbox again, then take a look at your terminal output. You should see a bunch of Track objects printed out. Here's an example of one:

{
id: 'c_0',
thumbnail: 'https://res.cloudinary.com/dety84pbu/image/upload/v1598465568/nebula_cat_djkt9r.jpg',
topic: 'Cat-stronomy',
authorId: 'cat-1',
title: 'Cat-stronomy, an introduction',
description: 'Curious to learn what Cat-stronomy is all about? Explore the planetary and celestial alignments and how they have affected our space missions.',
numberOfViews: 30,
numberOfLikes: 0,
createdAt: '2018-09-10T07:13:53.020Z',
length: 2377,
modulesCount: 10,
modules: [
'l_0', 'l_1', 'l_2',
'l_3', 'l_4', 'l_5',
'l_6', 'l_7', 'l_8',
'l_9'
]
}

The parent track has a field called authorId. This is just what we need to pass into the getAuthor method!

Destructure the parent parameter to get the authorId, then pass that into the getAuthor method. (You can also delete the console.log statement now.)

src/resolvers.js
export const resolvers = {
Query: {
tracksForHome: (parent, args, {dataSources}) => {
return dataSources.catsAPI.getAllTracks();
}
},
Track: {
author: ({authorId}, args, {dataSources}) => {
return dataSources.catsAPI.getAuthor(authorId);
}
}
};

Check your work in Apollo Sandbox

Now, when you run the full home page query, you should get data back successfully!

query GetTracksForHomepage {
tracksForHome {
id
title
thumbnail
length
modulesCount
author {
id
name
photo
}
}
}
Previous
Next