Hi. Thanks for everything. I’m having trouble with the getTrack query (with variables) section 6. QUERY BUILDING IN APOLLO STUDIO:. This is what I get:
I’m able to do the tracks for home:
So (I think this is obvious) when I try to go to one of the tracks I get this error:
TypeError: Cannot destructure property 'title' of 'track' as it is null.
TrackDetail
C:/dev/w/apollo-odyssey/odyssey-lift-off-part3/client/src/components/track-detail.js:23
20 | */
21 | const TrackDetail = ({ track }) => {
22 | const {
> 23 | title,
24 | description,
25 | thumbnail,
26 | author,
And then also a question arises : why isn’t this error handled in another way? I mean wouldn’t the QueryResult component handle the error?
Sorry if this is not the correct way or place to ask for help.
But then again, thanks in advance for any help
It looks like someone just didn’t make a null-safe access.
const { title } = track ?? {};
Or just don’t render the component if there’s no track.
@kevin-lindsay-1 So that would be in the TrackDetail component, wouldn’t it? And so, that would be part of the apollo team side?
Anyway I went on to the 4th lift off a odyssey thing/chapter and all is working good now. Also I din’t check how it was working in the final folder part of the project (and may be won’t do so)
Hi @alvarobyrne, glad you’re enjoying the course so far!
From what I can tell, there might be an issue with your Query.track resolver, since the track is returned as null. What code do you have in the resolvers.js file for Query.track? Is it connected to the TrackAPI datasource properly?
That said, we (aka the Apollo Education team) can definitely improve on the TrackDetail component side to render something more helpful when track is null.
Thanks @MichelleMabuyo : yeah! I wouldn’t know whats going wrong because now I’m on the 4th chapter/mission of the odyssey and I’m back to ther error. now I did change to the final folder and npm installed both server and client packages , and npm started both server and client servers and it works fine, but on the root folder (vs final folder) (my side) the error is back again:
As said before, I insist, running the project in the final folder, things work well
Oh interesting! Can you copy-paste what you have in both the resolvers.js file and the track-api.js file when you get the error? I have a feeling the issue is somewhere in there!
const resolvers = {
Query: {
// returns an array of Tracks that will be used to populate the homepage grid of our web client
tracksForHome: (_, __, { dataSources }) => {
return dataSources.trackAPI.getTracksForHome();
},
// get a single track by ID, for the track page
track: (_, { id }, { dataSources }) => {
return dataSources.trackAPI.getTrack(id);
},
// get a single module by ID, for the module detail page
module: (_, { id }, { dataSources }) => {
return dataSources.trackAPI.getModule(id);
},
},
Track: {
author: ({ authorId }, _, { dataSources }) => {
return dataSources.trackAPI.getAuthor(authorId);
},
modules: ({ id }, _, { dataSources }) => {
return dataSources.trackAPI.getTrackModules(id);
},
},
Mutation: {
incrementTrackViews: async (_, { id }, { dataSources }) => {
try {
const track = await dataSources.trackAPI.incrementTrackViews(id);
return {
success: true,
code: 200,
message: `Successfully incremented number of views for track ${id}`,
data: track
}
} catch (error) {
return {
success: false,
code: error.extensions.response.status,
message: error.extensions.response.body,
data: null,
}
}
}
}
};
module.exports = resolvers;
const { RESTDataSource } = require('apollo-datasource-rest');
class TrackAPI extends RESTDataSource {
constructor() {
super();
// the Catstronauts catalog is hosted on this server
this.baseURL = 'https://odyssey-lift-off-rest-api.herokuapp.com/';
}
getTracksForHome() {
return this.get('tracks');
}
getAuthor(authorId) {
return this.get(`author/${authorId}`);
}
getTrack(trackId) {
return this.get(`track/${trackId}`);
}
getTrackModules(trackId) {
return this.get(`track/${trackId}/modules`);
}
getModule(moduleId) {
return this.get(`module/${moduleId}`);
}
incrementTrackViews(trackId){
return this.patch(`track/${trackId}/numberOfViews`);
}
}
module.exports = TrackAPI;
And this is how my console looks like after step 8. THE USEMUTATION HOOK
in chapter 4 lift off 4 part 4 mutations :
- THE USEMUTATION HOOK
Hmm nothing looks off to me from what you’ve posted. If you’d like, I can take a look at your project through a Github or CodeSandbox link and run it myself and try to see what’s happening!
You also mentioned the final project was working well, so maybe try seeing what is different from that code compared to yours?
