#06Rick & Morty: Double Fetching
Overview
Practice fetching data from the Rick & Morty API and displaying character names along with their first episode titles.
Requirements
- Fetch characters from the Rick & Morty API:
https://rickandmortyapi.com/api/character/?page=${page} - Display the first 20 characters from page 1 when the app loads.
- Include a Load More action to fetch and append the next page of characters.
- For each character, perform an additional request to the character's first episode URL (
character.episode[0]) and display that episode's title next to the character. - Render each character (with its episode title) using the provided
CharacterCardcomponent. - Handle loading state correctly (show a "Loading..." indicator while fetching).
- Handle errors gracefully:
- If fetching characters fails, display an error message.
- If fetching any episode fails, ignore that episode and continue without breaking the app.
Notes
- Fetch episode titles in parallel to improve performance.
- Keep all fetched characters in a single state array to simplify pagination.
- Make sure loading additional pages does not reset previously loaded characters.
Tests
- renders 20 characters from the API
- loads more characters when clicking Load More
- fetches episode titles for each character
- fetches episode titles in parallel
- shows loading indicator while fetching characters
- shows error message when fetching fails