😋

【更新版】とりあえず動かす！Cloud9 & React & Amplify & GraphQLの環境構築 (GraphQL構築編)

2023/11/06に公開

GraphQL

Amplify

AppSync

tech

導入

前に書いた記事（とりあえず動かす！Cloud9 & React & Amplify & GraphQLの環境構築）の更新版です。
Cloud9にReactプロジェクトを作成してAmplifyを構築して疎通確認するまでの手順をまとめました。前回記事からの変更点は要点ごとに記事を分けたことです。

留意事項

リージョン：オレゴン（us-west-2）
- リージョンは↑で統一しているので、以降の手順を進める際にはリージョンをオレゴン（us-west-2）で進めます
Reactのプロジェクト名：sampleapp
- 全て↑のフォルダ配下で行います

構成

最終的に下の構成にしたいので今回はいよいよGraphQLの構築を行います。

GraphQLの新規作成

前回までの記事で構築したReactプロジェクトsampleappの配下にターミナルで移動します。
以下コマンドを実行してGraphQLを新規作成します。

amplify add api

コマンドを実行すると作成するAPIの種類を聞かれるので「GraphQL」を選択します。

? Select from one of the below mentioned services: (Use arrow keys)
❯ GraphQL 
  REST

次にGraphQLの設定を行います。特に修正しないので「Continue」を選択します。

? Here is the GraphQL API that we will create. Select a setting to edit or continue (Use arrow keys)
  Name: sampleapp 
  Authorization modes: API key (default, expiration time: 7 days from now) 
  Conflict detection (required for DataStore): Disabled 
❯ Continue

次にschemaのテンプレートを選択します。schemaは後ほど編集しますが、ここでは「Single object with fields」を選択します。

? Choose a schema template: (Use arrow keys)
❯ Single object with fields (e.g., “Todo” with ID, name, description) 
  One-to-many relationship (e.g., “Blogs” with “Posts” and “Comments”) 
  Blank Schema

最後にschemaの編集を確認されますが編集しないので「n」を押します。

? Do you want to edit the schema now? (Y/n) ‣

以下が表示されてGraphQLの作成が完了です。

✅ Successfully added resource sampleapp locally

✅ Some next steps:
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud

Schemaの編集

ここでは先ほど作成したGraphQLのschemaを疎通確認用に手動で修正します。
sampleapp/amplify/backend/api/sampleapp/schema.graphqlを開きます。
schema.graphqlの置き場所は分かりにくいので、Cloud9のフォルダ構成で以下の場所にあります。

作成済みのテンプレートを全て削除して以下に書き換えてファイルを保存します。

type Todo @model @auth(rules: [{allow: public}]){
    id: ID! @primaryKey
    name: String
    createdAt: AWSDateTime 
    updatedAt: AWSDateTime 
}

input inputTodo {
    id: ID
    name: String
    createdAt: AWSDateTime 
    updatedAt: AWSDateTime 
}

input requestParameter {
  msg: String
  getList: [inputTodo]
}

type statusResult {
  statusCode: Int
  returnMessage: String
  todoList: [Todo]
}

type Query {
  sampleQuery(param: requestParameter):statusResult @function(name: "lambdaSampleapp-${env}")
}

GraphQLのアップロード

以下のコマンドで作成したGraphQLをAmplifyへアップロードします。ここで言うアップロードは「Cloud9のローカルにあるGraphQLをAmplifyのサーバ側へ反映する」ことです。

amplify push

まずはアップロードの確認を聞かれるので「Y」で次へ進みます。

    Current Environment: dev
    
┌──────────┬───────────────┬───────────┬───────────────────┐
│ Category │ Resource name │ Operation │ Provider plugin   │
├──────────┼───────────────┼───────────┼───────────────────┤
│ Api      │ sampleapp     │ Create    │ awscloudformation │
└──────────┴───────────────┴───────────┴───────────────────┘
? Are you sure you want to continue? (Y/n) ‣

次にGraphQLの新規作成の確認を聞かれるので同じく「Y」で次へ進みます。

? Do you want to generate code for your newly created GraphQL API (Y/n)

次に利用する言語を聞かれます。この記事ではフロントエンドもバックエンドも全て「javascript」で統一するので「javascript」を選択します。

? Choose the code generation language target (Use arrow keys)
❯ javascript 
  typescript 
  flow

GraphQLのファイル名は変更しないのでそのままEnterを押します。

? Enter the file name pattern of graphql queries, mutations and subscriptions (src/graphql/**/*.js)

疎通確認でGraphQL操作は一通り行うので「Y」を押します。

? Do you want to generate/update all possible GraphQL operations - queries, mutations and subscriptions (Y/n)

Schemaのネストは変更しないのでそのまま「2」を押します。

? Enter maximum statement depth [increase from default if your schema is deeply nested] (2)

しばらく待つと以下が表示されAmplifyへのアップロードが完了します。

✔ Generated GraphQL operations successfully and saved at src/graphql
Deployment state saved successfully.

以上でGraphQLの構築が完了です。次回はfunction(Lambda)を構築します。