AmplifyでサクッとTODOを作ろうと思ったのだがメインバージョンで色々とハマったこと備忘録（その2）

チュートリアルから自分流にカスタマイズ

その１では自分がTODOを作るまでにハマった点をざっくりお伝えしましたが今回は具体的な実装とチュートリアルから自分流にカスタマイズした点について書こうと思います。

Reactアプリ作成からamplify initまで

ここは手順通りに進めました。

npm create vite@latest
cd react-amplified
npm install
npm run dev

これで普通にReactアプリは出来上がります。
そこから

amplify init

でバックエンドを初期化します。
Distribution Directory Pathをdistにするのはお忘れなく。（構築後に手動で直しちゃってもOK。Reactの構築をvite使ってない方はbuildのままでもいいかも）

amplifyさんは全てをよしなにやってくれます。故の自分的にはブラックボックスだからamplifyを深ぼることも追々したいと思いますが今時点ではチュートリアル通り実行していきました。

GraphQL API とデータベースを作成する

ここもチュートリアル通りに実行しました。

amplify add api

amplify/backend/api/API 名/schema.graphqlが出来上がるのでここで自分の作りたいものに合わせてschema定義を変更したら良いと思います。
自分は必要なカラムを追加しました。

早速デプロイします。

amplify push

あっという間にデプロイできちゃいます。
手っ取り早くプロト作りたい時なんか最高ですね。

フロントとバックエンドを接続

一旦ここもチュートリアル通りに進めて動くところまで確認しました。
サクッと繋がってdynamoからデータ取得し表示できちゃいます。なんて素晴らしい。

ルーティングを実装

ここからがカスタマイズの始まりです。
ルーティングを実装したいのでreact-router-domを使います。
バージョン指定せずにnpm installするとメインバージョンは今時点で６になりますね。
v5とv6の違いについては下記の記事あたりを参照したり元々あったナレッジから実装しました。

チュートリアルで作ったApp.tsxは一旦破棄しreturnの中身を下記に変更。必要なページをpages配下に作りました。

App.tsx

<div className="App">
    <BrowserRouter>
      <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
</div>

これでとりあえずrootとaboutページが出来ました。
ここからさらにカスタマイズしていきます。
続きは（その３）で書こうと思います。