Displaying data from SWAPI with NextJS

[paulG]

I am trying to display film details from this API ‘swapi.dev/api/films’ in NextJS but I keep getting an error. It has something to do with the getStaticPath function. I am using this code: any help welcome.

This is the ‘films’ code that displays details of all the episodes, and this is working ok.

import fetch from 'isomorphic-unfetch';
import Link from 'next/link'

export const getStaticProps = async () => {
    const res = await fetch('https://swapi.dev/api/films');
    const data = await res.json();
  
    return {
        props: {films:data.results}
    }
}

const Films = ({films}) => {
    return (
       <div >
      {films.map(film =>(
        <div className='card'>
            <Link className={styles.a}  href = {'/details/' + film.episode_id}  key ={film.episode_id}>
            
            <p>{`Episode: ${film.episode_id}`}  - <strong>{film.title}</strong></p>
         
        </Link>
         </div>
        ))}

      
</div>

and this is the code to display details of a selected episode and it is in this code I am getting the error.

import fetch from 'isomorphic-unfetch';

export const getStaticPaths = async () => {
  const res = await fetch('https://swapi.dev/api/films');
  const data = await res.json();

  const paths = data.results.map(film => {
    return {
      params: { id: film.episode_id.toString() },
    };
  });
  return {
    paths,
    fallback: false,
  };
};

export const getStaticProps = async (context) => {
  const id = context.params.id;
  const res = await fetch(`https://swapi.dev/api/films/${id}`);
  const data = await res.json();

  return {
    props: { film: data },
  };
};

const Details = ({ film }) => {
  return (
    <div>
      <h1>Episode {film.episode_id}</h1>
      <h1>{film.title}</h1>
    </div>
  );
};

export default Details;

I get the server error shown below.

I have also tried taking ‘results’ out of ‘data.results.map’, so ‘data.map’ but just results in a error says data.map is not a function…I guess because data is an object not an array. But results is an array so I am still lost. I do think the issue lies here somewhere though…

[paulG]

@stefandim91 thanks for your reply. I notice my previous post has been removed for it was deemed to be a duplicate… so I am not sure if you will see this…I hope so. Here is a link to a github repo. If you could have a look and see what the issue may be that would be great. Thanks GitHub - paulgreenwood67/NextJS---Star-Wars: Next JS app displaying SWAPI data. As a reminder the issue in this post was resolved and data is being displayed. Now I have a different issue. When I select a film in films.js the wrong data is displayed in details.js

[stefandim91]

After a little digging, I found what is causing this. A bit tricky, but actually the whole thing is with the API. If you take closer look at the response object you have one prop called episode_id and other prop called url. The first one shows which episode is the movie and the second is the actual url to make the request for the movie.
IMO, because the movies parts didn’t came out chronologically it’s causing the confusion. E.g. A New Hope (Episode 4) came first and the detailed info can be found on https://swapi.dev/api/films/1/ (which is the url prop of the movie).

Hope that clears things enough.

Also I had a look at the code in the repo. I recommend you to check the console, because there are some errors and solving them would be great. Also I suggest, to install some linter and formatter in your IDE.

Nice job with getStaticProps and getStaticPaths.

[paulG]

Hey, thanks… so would use const res = await fetch(‘… swapi.dev/api/films/’+ url); in the getStaticPaths?

[stefandim91]

Well, the url prop is the actual url to make the request. const res = await fetch(url);
However you can’t pass the whole url in the path, so you should think of another way to achieve this.

[paulG]

Ok thanks, can I ask…did you get it to work?.. I believe I may be using code for an older version of next?

[stefandim91]

<Link className={styles.a} href={'/details/' + film.url.slice(-2, -1)}>
This should work.

Also you should move the key prop to the div element.

[paulG]

@stefandim91

Oh my… and it does!! I knew the issue was on that link for it was showing the wrong url on hover but I couldn’t figure it out. Thank you!