How to pull multiple pages of data from api - json

Question

I am practicing pulling data from an API using React and can't seem to figure out how to pull more than just one page of data.
"info": {
"count": 493,
"pages": 25,
"next": "https://rickandmortyapi.com/api/character/?page=2",
"prev": ""
},
"results": [
{
"id": 1,
"name": "Rick Sanchez",
"status": "Alive",
"species": "Human",
"type": "",
"gender": "Male",
},
{
"id": 2,
"name": "Morty Smith",
"status": "Alive",
"species": "Human",
"type": "",
"gender": "Male",
That is how the JSON data is structured and there are 20 people per page. I'm thinking it has something to do with using .com/API/character/next path somehow but can't wrap my head around it due to inexperience. This is my call in the App.js file.
function App() {
const [characters, setCharacters] = useState([]);
useEffect(() => {
async function fetchChar() {
let res = await fetch("https://rickandmortyapi.com/api/character/")
let data = await res.json();
setCharacters(data.results);
}
fetchChar();
}, [])
This is how I return like this in my Characters.js component file (Using semantic-UI-react). This has the first 20 characters show up on the page.
return(
<div>
<h1>People</h1>
<Grid columns={4}>
{data.map((characters, i) => {
return (
<Grid.Column key={i}>
<Card>
<Card.Content>
<Card.Header>{characters.name}</Card.Header>
<Card.Description>
<strong>Status</strong>
<p>{characters.status}</p>
I feel like there should be an easier way to pull from multiple pages, but after about 3 hours of research I still can't figure it out.
Is there a way to pull all 493 characters from all 25 pages or will I have to make 25 different fetch calls?

Answer 1

You're getting paginated results from the API. Either you need to use an API call that returns the entire data set (if it exists), OR you need to make 25 calls. You would just keep fetching with the value of next, adding to the array of data you're collecting until next presumably is empty and the calls would stop.

Answer 2

do a Promise.all on the rest of the pages
async function fetchChar() {
let res = await fetch("https://rickandmortyapi.com/api/character/");
let data = await res.json();
const restOfThepages = await Promise.all(
Array(data.info.pages - 1)
.fill(0)
.map(i =>
fetch(`https://rickandmortyapi.com/api/character/?page=${i + 2}`).then(res => res.json()).then(d => d.results)
)
);
const flattenedData = restOfThepages.reduce((acc, d) => [...acc, ...d], []);
return [...data.results, ...flattenedData];
}