I have a specific case where I am dealing with an array of 500 post IDs and I need to retrieve the first 100 posts. To achieve this, I implemented the following code:
API
https://github.com/HackerNews/API
BASE_URL = 'https://hacker-news.firebaseio.com/v0'
const checkResponse = (response: Response) => {
return response.ok ? response.json() : Promise.reject(`Some error`);
};
const fetchStoryIdList = async (): Promise<any> => {
try {
const response = await fetch(`${BASE_URL}/newstories.json`);
const idJson: number[] = await checkResponse(response);
return idJson;
} catch (error) {
console.log(error);
}
};
const fetchStoryList = async () => {
const idList = await fetchStoryIdList(); // idList contains 500 IDs
const promises: IStory[] = idList.slice(0, 100).map(async (id: number) => {
try {
const response = await fetch(`${BASE_URL}/item/${id}.json`);
const storyData: IStory = await checkResponse(response);
return storyData;
} catch (err) {
console.log(err);
}
});
const storyList = await Promise.all(promises);
console.log('storyList:', storyList);
return storyList;
};
Issue
In some instances, when making an API call for individual post data, the response returns null. This results in a mix of posts and null values being rendered in the component, causing the application to crash. After manually refreshing the page, the API calls work fine without returning null responses.
For example, the fetch request for post with ID 28359987 may return null, but upon page refresh, a new API call retrieves the post successfully. However, the issue persists intermittently for other post IDs as well. How can this be resolved?