🕌

amplify appsyncを用いてAPIを接続するまで

2023/08/04に公開

Next.js

Amplify

AppSync

tech

Amplify memo

schema.graphqlに定義したスキーマをamplify pushで諸々自動生成する。
schemaの認証はcognito user　poolを用いて作成。
next.jsで開発しているので最初に読み込まれる_app.tsxに認証情報を読み込ませる。
アプリのエントリポイント (つまり、App.js、Index.js、_app.js、またはmain.js ) で、構成ファイルをインポートして読み込みます。

yarn add aws-amplify

import { Amplify, Auth } from 'aws-amplify';
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);

今回はawsの環境を開発と本番用で使い分けるため、next.config.jsで環境変数を設定してawsconfigの中身を管理しています。
[認証情報についてのリンク]（https://docs.amplify.aws/lib/auth/getting-started/q/platform/js/）
next.config.jsとは？
クエリを読んでくる

import { API, graphqlOperation } from 'aws-amplify';
import { GraphQLQuery } from '@aws-amplify/api';
import { listTodos } from './graphql/queries';
import { ListTodosQuery } from './API';

const todos = await API.graphql<GraphQLQuery<ListTodosQuery>>(graphqlOperation(listTodos));

amplify pushの際に自動生成されたファイルからクエリを呼び出す。awaitはasyncがないと使えないのでフロントでの呼び方で一つ工夫を入れる。
フロントの知識おさらい
- プロミスpromise
- 非同期処理の完了 (もしくは失敗) の結果およびその結果の値を表します。
- 参考MDN
- async function
- 非同期関数を宣言し、その中で await キーワードを使うことができます。
- asyncとawaitを用いることでtry catchが使えるようにもなる。エラーハンドリングできるので楽ちん。
- 参考MDN
こんな感じでクエリをテーブルデータに入れます。

const [tableData, setTableData] = useState([]);
useEffect(() => {
    fetchCorporations();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  async function fetchTodos() {
    try {
      const TodosData = await API.graphql<GraphQLQuery<ListTodosQuery>>(
        graphqlOperation(listTodos)
      );
      setTableData(TodosData.data?.listTodos?.items as any);
    } catch (err) {
      console.log('xxxx');
    }
  }

Amplify memo

Discussion