[Golang/React]~MovieApp1: アプリ連携~

こんにちは、KOUKIです。

GolangとReactでMovie Appの開発をしています。

そして今回は、これまで実装してきたGolangとReactアプリを連携させたいと思います。

尚、Udemyの「Working with React and Go (Golang)」を参考にしているので、よかったら受講してみてください。

前回

Webサーバーのルーティング処理を実装しました

事前準備

フォルダ/ファイル

モジュール

プロジェクト

CORSの設定

GolangとReactはDocker環境で動いています。

この時、サイトのオリジンがそれぞれ「http://localhost:3000」、「http://localhost:4000」と異なるため、アプリケーション間の通信ができません。

問題を回避するために、CORS(異なるオリジン間でリソースの受け渡しができる仕組み)の設定を追加しましょう。

リクエストするHTTPヘッダーに「Access-Control-Allow-Origin, * 」を追加することで、全てのオリジンを許可しました。

これをroutesで使用します。

Movieリストの取得

ReactからGolang APIへリクエストを送り、Movieリストを取得しましょう。

APIへのリクエストには、axiosを使います。

BaseURL

axiosのBaseURLを設定しておくと、APIのURLの記述が短く済みます。

Movies APIへリクエスト

MoviesコンポーネントからMovies APIへリクエストを送ります。

動作検証

「docker-compose up」でコンテナを立ち上げ、ブラウザから「http://localhost:3000」にアクセスしましょう。

それから、メニューバーの「Movies」タグをクリックします。

エラーハンドリング

誤ったURLを指定するなどして、APIへのリクエストがエラーになる場合があります。

「moviess」と誤ったURLを指定し404エラー

こういった場合に備えて、エラーハンドリング(catch)を追加しておきましょう。

Movie APIへのリクエスト

Movieデータを取得する処理を実装します。

Movieモデルの更新

Movie APIからのレスポンスは、以下のようになっています。

これに合わせて、Movieモデルのインターフェースを更新します。

Axios

Movie APIへリクエストを送信する処理を実装します。

ページへ反映

取得したMovieデータをページに反映させます。

検証

ブラウザから「http://localhost:3000/movies/1」へアクセスしてみましょう。

OKですね。

次回

次回は、Movieデータに付随してついてくるGeres(ジャンル)データを処理します

記事まとめ

参考書籍

ソースコード

routes.go

middleware.go

index.tsx

movie.ts

Movies.tsx

OneMovie.tsx

コメントを残す