#Error when defining the type of a prop

6 messages · Page 1 of 1 (latest)

tropic moth
#

I have an api with the following data

[

  { "title": "The Godfather", "year": 1972, "rating": 9.2, "tmdb_id": 238 },
  { "title": "Fight Club", "year": 1999, "rating": 8.8, "tmdb_id": 550 },
...
]

I am using getserverside props to fetch this data.

export const getServerSideProps: GetServerSideProps = async () => {
  const res = await fetch("http://localhost:3000/api/movies")
  const movies = await res.json()
  return { props: {
    movies
  }}
}

I use the following type to define movies

type Data = {
  title: string, 
  year: number,
  rating: number,
  tmdb_id: number
}

const Home = ({ movies }: Array<Data>) => {...

When i map this data using {movies.map((movie: Data)=> { NextJS throws the following error

Type error: Property 'movies' does not exist on type 'Data[]'.
> 11 | const Home = ({ movies }: Array<Data>) => {
     |                 ^
plucky island
#

const Home = ({movies} : {movies: Array<Data>}) => …

tropic moth
#

damn im an idiot

#

thanks man

#

it throws another error now 💀

#

FetchError: request to http://localhost:3000/api/movies failed, reason: connect ECONNREFUSED ::1:3000