I have a page that loads some data from an api as the main content. This data or main content has some related content and I'm getting that related content with a different call to the api. There isn't always related content to accompany the main content, so in the case where there is no related content, the api call returns a 404.

What I want is to not have that 404, so is there any way that I can reject the call if the status of that call is 404?

On one hand I'm requesting the main content with this call from a ContentService.js file:

getMainContent: () => {
    return resource.get(`/main/content`);
}

Then, from the main content page I continue the call:

ContentService.getMainContent().then(
    res => (this.mainContent = res.data.mainContent),
    err => {
        this.status.err = true;
    }
);

This is all good. I get that content and in case there is none I can go to a 404 page.

On that same page I load the related content in a div under the main content and I call that content in the same way:

getRelatedContent: () => {
    return resource.get(`/related/content`);
}

And in my component:

ContentService.getRelatedContent().then(
    res => (this.relatedContent = res.data.relatedContent),
    err => {
        this.error = true;
    }
);

In this case, if there is no related content I cannot go to a 404 page because the main content is actually loaded, it just doesn't have any related content, so I set an error to true and hide that div if it is empty.

My problem is that pages with main content but no related content have a 404 error because of that api call.

Is there any way I can reject that call if it returns no data and avoid that 404 status on these types of pages?

Thanks.

0 Answers