SWAPI does not return all people after selecting a film

Question

So I am doing a small app, to retrieve all characters that were featured in a Star Wars using swapi.dev/ .

The way it should work, is that once I select a film, all characters that were in it should appear, however, upon selecting different films, I get different results back, as an example, if I select Star Wars Episode 4, I get up to 10 characters, where I should obviously have more (18 if I am correct), if I select Episode 1, I get only 3 people. This is the code I am using to get the people:

async function fetchPeople() {
    let res = await fetch('https://swapi.dev/api/people/');
    let data = await res.json();
    return data.results;
}


export const showPeople = async (movies) => {
    const people = await fetchPeople();
    const matchingPeople = [];
    console.log('char count: ', movies.characters.length);
    console.log('peopel count: ', people.length);
    movies.characters.forEach((movieCharacter) => {
        people.forEach((person) => {
            const isMatching = person.url === movieCharacter;
            if (isMatching) {
                matchingPeople.push(person);
            }
        });
    });
    return matchingPeople;
}

Now for the tricky part: when I console.log "char count", I get the correct amount of characters (in the case of Episode 4 18 characters, that are in the API, however in the console.log "peopel count", I get only up to 10. It gets weirder.

Here is the code for the React component in getting to show the movies:

import React from 'react'
import { Card, Grid, Button } from 'semantic-ui-react'
import {showPeople} from '../controllers/ShowPeople'
// import fakedata from '../fakedata.json'


const Movies = ({data, setPeople}) => {
    console.log(setPeople)
    return (
        <>
        <h1>Movies</h1>
        <Grid columns={3}>
            {data && data.map((movies, i) => {
                return (
                    <Grid.Column key={i}>
                        <Card>
                            <Card.Content>
                                <Card.Header>{movies.title}</Card.Header>
                                <Card.Description>
                                    <strong>Episode</strong>
                                    <p>{movies.episode_id}</p>
                                    <strong>Release</strong>
                                    <p>{movies.release_date}</p>
                                </Card.Description>
                            <Button onClick={ async () => {
                                const people = await showPeople(movies)
                                console.log('test people ',people)
                                setPeople(people)
                            } }>
                                Show People
                            </Button>
                            </Card.Content>
                        </Card>
                    </Grid.Column>
                )
            })}
        </Grid>
    </>
    )
}

export default Movies;

Now, in console.log("test people"), I get different array results, depending on the movie I select, sometimes 6 people, sometimes 3, sometimes 10, but no more than 10 people.

Chrome console screenshot:

What could be the problem? At first I thought the API was restricting my requests, but I doubt I achieve 10k request per day on this API. Maybe The issue would be with the showPeople function?

Full code on github for more clarity

Answer 1

You might want to check the documentation again of the api.

Take this url for example: api/people/?page=7

{
    "count": 82, 
    "next": "https://swapi.dev/api/people/?page=8", 
    "previous": "https://swapi.dev/api/people/?page=6", 
    "results": [...] //10 results
}

As you can see, this shows 10 results again. So we can conclude that the api will always return a maximum of 10 items per api call in the results property.

Most APIs offer 2 different solutions.

1. They might have a property that lets you change the pageSize. For example, this might be used to return 50 objects in one api call.
2. The most common is that they will have a page property. You will need a second api call to get the next x (10) items.

I can think of 2 different solutions.

You either work with the next property. This is a good way if the data set is quite large and you want to work with pagination.

You can also do some simple maths and work with the count property. For example, the wanted api call have 82 items. You can divide that by 10. You will have 8.2 and round it up. You now know it will have 9 pages so you can send 9 api calls. But keep in mind, this is not that friendly for an API and some public APIs can have some low rate limiting. If you send to much requests in a short amount of time, you might get blacklisted.

If you have received the results, append the results to a local array and you can do whatever you want with it (i.e. displaying the information).

But an important note is performance. Do you want your customers that they load in 82 different pictures? You might want to also work with pages or the data loads in when you scroll down via a new api call.