NextJSでApolloを使ってみた(ハンズオン)

このハンズオンでは、NextJSで、Apolloを導入してみたいと思います。また最後にAWS AppSyncを(少しだけ)使ってみたいと思います。

より実践に近い構成になっていると思うので、ぜひ最後までお付き合いいただければと思います！

Apolloとは

apolloとはGraphQL周りの設定を担ってくれて、簡潔なコードで手軽にGraphQLを導入できるライブラリです。

Apolloを動かすには、Apollo ClientとApollo Serverを利用します。

https://www.apollographql.com/docs/apollo-server/getting-started/

Next JSにApolloを導入してみる

それでは早速nextjsにapolloを導入してみましょう。

/pagesディレクトリの_app.tsxファイルを開き、必要なパッケージをインポートします。

次に、アポロクライアントを作成します。これがサーバーとフロントを繋ぐ媒介となります。ここではローカルに立てたアポロサーバーと通信するため、uriをhttp://localhost:4000としています。

最後に作成したクライアントをプロバイダーでnextjsに接続していきます。

これでnextjs内部でGraphQLを扱えるようになりました！

アポロサーバーを実行させる

/serverフォルダにてyarn devを実行し、アポロサーバーを立てます。

ここで、http://localhost:4000にアクセスしてみましょう。リッチなIDEが出できました。ここで左にクエリを描き、真ん中の実行ボタンを押すとクエリが実行され、左にデータが現れます。

例として、以下のクエリを左にコピペして、実行してみてください。

二つの本のデータが出てくるはずです。これはserver/index.jsの中で直接定義されているデータですが、実践的には例えばデータベースに登録されているデータを参照します。後ほどAWS AppSyncで見ていきましょう。

server/index.jsの中を見ていくとtypeDefsという記述が見られます。以下の

では、Bookというスキーマを定義しています。タイトル、著者ともにStringであるとわかります。

また、以下では上で定義したBookが配列として取得できるクエリを表しています。

フックを使ってデータを取得・表示

実際にフロント側でデータを取得してみましょう。

/src/pages/index.tsxの中で以下のコードをコピペしてください。

このGET_BOOKSというクエリを書いています。

そして、useQueryを用いて最終的にデータを取得します。

console.log(data)でデータの中身を見てみましょう！

無事フロントでもデータを取得することができました！

AWS AppSyncの導入

次に、AWS AppSyncを使ってAWS DynamoDBにあるデータを取得してみたいと思います。

AWSの利用にはアカウントが必要です。またAWSには無料枠はあるものの、料金がかかることがあります。

AppSyncとは先程の例で言うと、server/index.jsの中身を担ってくれるもの、dynamoDBはserver/index.jsの中で直接定義されているデータ(ここではbooks)と考えておくとわかりやすいかもしれません。

AWS AppSyncのコンソール画面です。

右上のAPI作成ボタンを押して、新しくAPIを作成します。

今回はサンプルアプリなので、そのままの設定で(ウィザード)で右上の開始ボタンを押します。

モデル名はデフォルトのまま、モデルフィールドはそのままで右下の作成ボタンを押します。

このAPI名もデフォルトにしておきます。

右下の作成ボタンを押して完成です。

以上の操作でApp SyncのAPIだけではなく、このAPI専用のDynamoDBも作成してくれます！

左の目次からクエリを選び、以下のようにクエリを設定して、オレンジの三角ボタンを押すと

itemsには何も入っていませんがデータが出てきます。これはdynamoDBに格納されているデータです。

ではここのクエリでデータを作成してみましょう。以下のクエリを実行してみます。そのときクエリ変数に作成したいデータを置いておきます。

すると以下の結果が得られます。

これでdynamoDBにもデータが格納されました！

これらの操作をフロントでもやってみましょう。