Amplifyの公式チュートリアルをTypeScript×ReduxToolkit×Chakra uiでやってみた（Todoアプリ）

2817 ワード
redux-toolkit amplify chakra-ui TypeScript React TypeScript テキストリンク

今回 こちらのAmplifyの公式チュートリアルをやってみました。
公式では言語をJS、状態管理をHooks、UIキットをMaterial-uiでした。
アレンジを加えるために言語をTS、状態管理をRTK、UIキットをChakraでやってみました。

UIの共有


とてもシンプルなTodoアプリになりしました。

制作を通じて学んだこと

Authenticationはかなりカスタマイズ性あるなと改めて実感しました。
デフォルト？だとwithAuthenticatorでログイン機能を以下のように実装するのかなと思います。

import { withAuthenticator } from '@aws-amplify/ui-react'

function App() {
  return (
    <Box
      w={{ base: "90%", md: "50%" }}
      mx="auto"
      mt="50px"
      bg="gray.50"
      minH="100vh"
    >
      <Heading as="h1" textAlign="center" pt="5">
        Amplify Todo
      </Heading>
      <InputArea />
      <TodoList />
    </Box>
  );
}

export default withAuthenticator(App)

ユーザーはサインアップするにはあれこれ入力する必要があります。
ここまでユーザーに入力してもらわなくて大丈夫という時には以下のようなコンポーネントを作るだけで簡単にカスタマイズできます。ちなみに下の例では電話番号を省略しています。
他にも色々とカスタマイズできるので公式ドキュメントを見てみてください。

import {AmplifyAuthenticator, AmplifySignUp} from '@aws-amplify/ui-react';

const App = () => {
return (
     <AmplifyAuthenticator>
        <AmplifySignUp
          slot="sign-up"
          formFields={[
            { type: "username" },
            { type: "password" },
            { type: "email" }
          ]}
        />
      </AmplifyAuthenticator>

)
}

苦労した点

graphql周りの型定義にかなり苦戦しました。回避策としてasを使って型アサーションで強行突破しました。
型安全性が損なわれているような実装になってしまってので、もっと堅牢な方法を見つけていきたいと思います。

最後に

Amplify SNS Workshopも同じようにやってみたので改めて記事にします。

参考記事