How can I create an interface for API data in typescript?

Question

So I'm getting data from TMDb API(movies) and my App.js looks like this:

const App = () => {

  const [movies, setMovies] = useState<MovieType[]>([]); //state for setting movies to api data

  useEffect(() =>{
    fetchMovies();
  }, [])

  async function fetchMovies() {   //function for fetching data
    try{
      let apikey = '{api_key}';
      let url: string = 'https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=';
      url = url + apikey;
      const response = await axios.get<MovieResults[]>(url);
      setMovies(response.data.results);    //and here I get an error: Property 'results' does not exist on type 'MovieResults[]'
    }catch(e){
      alert(e);
      console.log(movies);
    }
}

  return (
    <div className="App">
      <Header/>
      <Hero movies={movies}/>
    </div>
  );
}

My types and interfaces:

export type MovieType = {
        vote_average: string,
        title: string,
        tagline: string,
        date: string,
        img: File,
    };

export type MovieResults = {
    results: MovieType[],
};

export interface MovieProps {
     movies: MovieType[],
      };

As you can see, I have types and interfaces, I created MovieType for passing props, and MovieResults for getting results from API. But I have an error when I try to set movies to api data: Property 'results' does not exist on type 'MovieResults[]' It's weird, because I actually have "results" property in MovieResults.

there is a data object before results. so interface should be data:movieResults[] you need to create one more interface for data and refer results from there — Sojin Antony
– Sojin Antony, Commented Jan 29, 2022 at 13:47

vighnesh153 · Accepted Answer · 2022-01-29 13:50:13Z

2

I think you meant to do axios.get<MovieResults>. If you do axios.get<MovieResults[]>, it will expect an array of MovieResults which I think is not what you want.

If you use MovieResults[] as type, you are basically expecting the data to be the following

[
  { results: ... }, 
  { results: ... }, 
  { results: ... }, 
  .
  .
  .
]

So, you are trying to read results from an array, which is not defined.

But, if you use MovieResults as type, the format of data will be the following

{
  results: ...
}

Here, you are reading results from an object.

edited Jan 29, 2022 at 13:50

answered Jan 29, 2022 at 13:45

vighnesh153

5,5103 gold badges26 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Carl Over a year ago

wow..you're right, that was actually the problem. but could i ask why? because i get an object from the api, so it shouldn't be MovieResults[]?

vighnesh153 Over a year ago

Updated the answer. Let me know if that clarifies.

Carl Over a year ago

so basically..results has a type of MovieType[], which is an array, so i guess that's why results is an object which contains arrays with movies? because when i console log results, it displays an array

vighnesh153 Over a year ago

Yea. The MovieResults is an object with results property. So, you don't need to add [] to it.

Collectives™ on Stack Overflow

How can I create an interface for API data in typescript?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related