[Golang/React]~MovieApp(最終回)-GraphQL3:画像を取得&表示しよう!

こんにちは、KOUKIです。

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

今回は、GraphQLを使ってTMDBから映画情報(画像など)を取得し、ページ上に表示する処理を実装したいと思います。

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

前回

GraphQLでSearch機能を実装しました。

事前準備

フォルダ/ファイル

The Movie Database(TMDB)

TMDBは、無料で使えるMovieデータを扱うAPIです。
※ただし、利用状況によっては課金される場合もあり、使い方に注意が必要

Sign upしなければ使えるようになりませんが、結構便利です。

画面右上にあるユーザーアカウントから「Settings」->「API」へと進んでいただき、利用規約に同意して個人情報を入力後にAPIキーを取得することができます。

取得したAPIキーは大事なものなので、外部に流出しないように気をつけましょう!

.envファイルにAPIキーを記述します。

docker-composeファイルは、コンテナ起動時に.envファイルをデフォルトで読み込んでくれます

その為、environmentフィールドに設定しておけば、コンテナ内で環境変数としてしようできます。

今回は、TMDB_KEYという名前で環境変数を登録しておきましょう。

OneMovieGraphqlコンポーネントの実装

以前、OneMovieコンポーネントを実装ましたが、それのGraphQL版を実装しましょう。

ルートを追加

Appコンポーネントにルートを追加します。

GraphQLコンポーネントの修正

GraphQLコンポーネントからOneMovieGraphQLコンポーネントへ遷移できるように修正します。

ついでに、Movieの詳細情報(descriptionなど)が表示されるようにも変更しました。

検証

早速、検証してみましょう。

OKですね。

Posterカラムの追加

MovieテーブルにPosterカラムを追加します。

DB操作

コンテナを立ち上げた状態で「http://localhost:9232/」にアクセスしてください。

Moviesの「SQL Query」タブに移動して、下記のコマンドを実行(Run Query)します。

クエリが問題なく発行されれば、moviesテーブルにposterカラムが追加されるはずです。

Movieモデルの修正

GoのMovieモデルにposterを追加します。

CreatedAtとUpdatedAtのJsonタグも「-」から変更しています。

Queryの変更

Posterを追加したので、Queryも変更します。

GraphQLスキーマーの変更

GraphQLのスキーマーにPosterを追加します。

TMDB APIへのリクエスト

先に取得したTMDBのAPI Keyを使って、TMDBへのリクエスト処理を実装します。

API Keyは非公開にしたいので、.envファイルにTMDB_KEYを設定し、それをdocker-composeファイルに読み込ませています。
※docker-composeはデフォルトで.envファイルを読み込む仕様になってます。

そして、osパッケージのGetenvメソッドにてTMDB KEYを取り出しています。

あとはそれを使って、HTTPリクエストをTMDB APIへ投げるだけです。

このメソッドは、editMovieメソッドから呼び出しましょう。

フロントエンドの修正

posterを表示できるようにフロントエンド(React)側を修正します。

Movieモデル

Movieモデルにposterを追加します。

EditMovieコンポーネントの修正

Movieモデルの修正により、EditMovieコンポーネントも修正します。

OneMovieコンポーネントの修正

OneMovieコンポーネントも修正します。

OneMovieGraphQLコンポーネントの修正

先程実装したOneMovieGraphQLコンポーネントにposterを追加します。

image画像を表示されるようにしました。

検証

検証してみましょう。

「http://localhost:3000/moviesgraphql/4」にアクセスしてみてください。

画像が表示されませんね。しかし、これは正常です。

DBに画像情報が格納されていないためです。

そこで、データを登録し直してみます。

まずは、下記のユーザーでログインします。

  • me@here.com
  • password

それから「http://localhost:3000/admin/movie/4」に移動していただいて、項目を何も変更せずに「Save」ボタンを押下しましょう。

再び、DBを確認するとposterに画像が格納されたことがわかります。

この状態であれば、「http://localhost:3000/moviesgraphql/4」から画像を確認できます。

まとめ

長かったMovie App開発もこれでお終いです。

Dockerの開発環境構築、Golangでのバックグラウンドの開発、Reactでのフロントエンドの開発、PostgreSQL操作、GraphQL操作など色々やりましたね。

ここで学んだことは実務でも役立つと思うので、ぜひ積極的に取り入れてみてください!

それでは、また!

記事まとめ

参考書籍

ソースコード

graphql.go

movie-handlers.go

models.go

movies-db.go

docker-compose.yml

App.tsx

EditMovie.tsx

GraphQL.tsx

OneMovie.tsx

OneMovieGraphQL.tsx

movie.ts

コメントを残す