前回は、AWS Amplify を、フロントエンドと統合しました。

今回は、AWS Appsync を、フロントエンドと統合します。

まずは、amplify/api/awsgraphqltest フォルダにある、schema.graphql を開きます。

Book と Category スキーマを作成しましょう。

Book の CategoryId と Category を関連付けるためには、@hasOneを使います。

@hasOneは、1 対 1 の関係の時に使います。

type Book @model {
  id: ID!
  title: String!
  author: String!
  categoryId: ID!
  category: Category @hasOne(fields: ["categoryId"])
  isRead: Boolean!
}

type Category @model {
  id: ID!
  name: String!
}

image2

フロントエンドのディレクトリに移動し、ターミナルで、amplify push を実行します。

数分後に完了するので、さらにターミナルでamplify console api を実行します。

どのサービスを利用するか聞かれるので、GraphQL を選択しましょう。

image3

ブラウザで AWS AppSync が開きます。

image4

自動で、createdAt と updatedAt を追加してくれていました。

CreateBookInput と CreateCategoryInput の id は書き換えないので、削除しましょう。

image5

スキーマを保存した後、クエリへ移動します。

試しにデータを作成しましょう。

まずは、createCategory でデータを追加してみます。

image6

右矢印の実行ボタンをクリックすると、

image7

データが追加されました。

id、createdAt、updatedAt も自動で追加されています。

次に、createBook で book データを追加します。

image8

image9

book データを追加することができました。

category も関連付けられています。

左メニュのデータソースをクリックます。

image10

BookTable のリソースをクリックし、DynamoDB を開いてみましょう。

image11

データが追加されていました。

フロントエンドのディレクトリのターミナルで、amplify codegen を実行します。

pages フォルダの Book.tsx を開きます。

aws-amplify から Amplify、API,、graphqlOperation をインポートします。

import Amplify, { API, graphqlOperation } from "aws-amplify"

Amplify.configureを設定します。

import awsExports from "../aws-exports"

Amplify.configure(awsExports)

useStatebookssetBooksを指定します。

booksが取得できているか、console.logで確認しましょう。

const [books, setBooks] = useState([])
console.log(books)

データを取得するため、fetchBooks を作成します。

クエリは、src/graphql フォルダの queries.ts から取得します。

import { listBooks } from "../graphql/queries"
const fetchBooks = async () => {
  try {
    const bookData: any = await API.graphql(graphqlOperation(listBooks))
    const books = bookData.data.listBooks.items
    setBooks(books)
  } catch (err) {
    console.log("error fetching books")
  }
}

useEffectで、初回のみfetchBooksを実行するようにします。

一通り完了しましたので、npm run startを実行して、フロントエンドを起動します。

localhost:3000/book にアクセスします。

console.logを確認すると、

image12

無事、データを取得することができました。

Network の graphql を確認すると、

image13

エンドポイントから取得できていることがわかります。

ブログ一覧