TypeScriptで外部APIを扱い、非同期通信でデータを取得する際、code404エラーが出てしまう。

Question

初めて投稿させて頂きます。

現在、React.jsとTypescriptを自分で学習中で、何か作ってみたいと思い、APIを扱ってNetflixのクローンを作ろうとしています。（このURLを参考にしております）

その中で、外部APIを扱ってデータを取得する際のエラーがどうしても解決できず、周りに聞ける人もいない為、アドバイス頂きたく投稿させて頂いたのが背景です。

【解決したい事】

　localhostにてTypeScriptで外部APIを扱い、非同期通信でデータを取得する際、エラーが出て取得できずにいる為、このエラーを解決したい。
具体的には、TMDB（Movie Database）のAPIで映画のデータを取得しようとしています。

【実行した事】

基本的に上記URLの通りに進めました。
create-react-appで環境構築し、下記実装。

まずは、axios.jsの作成(axiosインストール済）

import axios from 'axios';

//TMDBからのbaseURLリクエストを作成
const instance = axios.create({
  baseURL:"https://api.themoviedb.org/3",
});
export default instance;

次にrequest.jsの作成（上記baseURLの末尾につけて判断させるもの）

const API_KEY = "hogehoge";

export const requests = {
  fetchTrending:`/trending/all/week?api_key=${API_KEY}&language=en-US`,
  fetchNetflixOriginals:`/discover/tv?api_key=${API_KEY}&with_networks=213`,
  fetchTopRated:`/movie/top_rated?api_key=${API_KEY}&languager=en-US`,
  fetchActionMovies:`/discover/tv?api_key=${API_KEY}&with_genres=28`,
  fetchComedyMovies:`/discover/tv?api_key=${API_KEY}&with_genres=35`,
  fetchHorrorMovies:`/discover/tv?api_key=${API_KEY}&with_genres=27`,
  fetchRomanceMovies:`/discover/tv?api_key=${API_KEY}&with_genres=10749`,
  fetchDocumentMovies:`/discover/tv?api_key=${API_KEY}&with_genres=99`,
};

次に映画を一列で表示するコンポーネントを作成。

import { useState, useEffect } from "react";
import axios from 'axios';

type Props = {
  title: string;
  fetchUrl: string;
  isLargeRow: boolean;
};

type Movie = {
  id: string;
  name: string;
  title: string;
  original_name: string;
  poster_path: string;
  backdrop_path: string;
};

export const Row = ({ title, fetchUrl }: Props) => {
  const [movies, setMovies] = useState<Movie[]>([]);

  useEffect(() => {
    async function fetchData() {
      const request = await axios.get(fetchUrl);
      setMovies(request.data.results);
      return request;
    }
    fetchData();
  }, [fetchUrl]);

  console.log('movies', movies);

  return(
    <div className="Row" />
  );
};

最後に、Rowコンポーネントを設置。

import { Row } from './Row';
import { requests } from './request';
import './App.css';

function App() {
  return (
    <div className="App">
    <Row
      title="NETFLIX ORIGINALS"
      fetchUrl={requests.fetchNetflixOriginals}
      isLargeRow
    />
    <Row title="Top Rated" fetchUrl={requests.fetchTopRated} isLargeRow />
    <Row title="Action Movies" fetchUrl={requests.fetchActionMovies} isLargeRow />
    <Row title="Comedy Movies" fetchUrl={requests.fetchComedyMovies} isLargeRow />
    <Row title="Horror Movies" fetchUrl={requests.fetchHorrorMovies} isLargeRow />
    <Row title="Romance Movies" fetchUrl={requests.fetchRomanceMovies} isLargeRow />
    <Row title="DOcumentaries" fetchUrl={requests.fetchDocumentMovies} isLargeRow />
</div>
  );
}

【何が起こったか、エラーメッセージ】

この状態で、console.log('movies', movies);に対して、データを取得できているか確認したところ、下のエラーがでました。

また、上のスクショの通り、moviesは何のデータも取得していないようです。

【試した事】

①Postmanを使って試しに叩いてみたところ、データは問題なく取得できました。（API自体は問題ない？）
（https://api.themoviedb.org/3/discover/tv?api_key=hogehoge&language=en-US）

②元動画も確認しながら進めてみたのですが、同じエラーが出てデータを取得できませんでした。
③エラー文から検索して解決を試みたのですが、解決できずにいます。

ーーーーーーーーーーーーーーーーーーーーー

このエラーで何日も解決できず、完全に行き詰まってしまった為、
アドバイス頂きたくお願い致します。
宜しくお願い致します。

Comments

[hoshi-takanori]

スクショを見ると、API リクエストは TMDB ではなく localhost に送られてるようですが…。

Answer 1

Row.tsxにミスが有ります。
axios.jsにて、axiosのリクエスト先(baseURL)を外部のAPIサービスに向けているのですが、そのインスタンスを使用していないので、baseURLがlocalhostになり、レスポンスが帰ってきていない状態です。

そのため、axiosをbaseURLを設定したものを使用するように変えてやればいけます

import axios from 'axios';
↓
import axios from '../axios'; // パスの指定はディレクトリ構成似合わせて変えてください

また、参考のzennを拝見したところ、githubのリンクが記載されておりその中をみると詰まった際に参考になるかと思います。

Comments

[kay]

natsume2233様
返信が遅れて大変失礼致しました。
また、ご指摘ありがとうございます！！！！
axiosのパスを修正したら機能しました！
axios自体も初めて学んでいるので、正確に理解できておりませんでした。
ありがとうございました！