はじめに
今回はAWS AmplifyのReact向けワークショップ「AMPLIFY SNS WORKSHOP」をTypeScript+Redux Toolkit化しながら体験してみました。
いざWorkshop
TwitterライクなSNSアプリケーションを作成するというテーマの中で、Amplifyの使い方を徐々に機能アップしながら学んでいけるワークショップになっています。Cognitoを使った認証の実装から始まり、AppSyncを用いたCRUD機能の実装、Lambda、Elasticsearchまでと盛りだくさん。しかも間々ではAmplifyCLIの使い方やAmplify Mocking、GitHubとの連携、さらにCypressを使ったE2Eテストとこれでもか！というくらいいたれりつくせりの内容なのでAmplifyをまず触ってみようという方には確実にオススメです！
まずWorkshopの通りJavaScriptで1周回、2周目をTypeScript + Redux Toolkitに書き換えながら進めてみました。
.jsを.tsxに書き換えて、エラーの出ている箇所をエディターと自分の推論？を効かせながら少しづつ書き換えていきます。以前Amplifyチュートリアルの書き換えも行っているので書き換えるソース量は多いですが徐々にエラーを消していくことができました。
なんとなく書き換え前から嫌な予感はしていたのですが今回のラスボスはsubscription部分。
いろいろと調べながらトライし続けましたがなかなかうまくいかず。。
subscription部分については一度諦めかけたところ、調べ尽くしかけたところにDEVの記事を見つけてやっと解決することができました。あやうく全部// @ts-ignoreで逃げるところでした。。。
この記事で他怪しげだった部分もだいぶ参考にさせていただきました。
useEffect(() => {
console.log(currentUsername);
if (!currentUsername) return;
console.log('make subscription');
let unsubscribe;
const subscription = API.graphql(
graphqlOperation(onCreateTimeline, { userId: currentUsername }),
);
if (subscription instanceof Observable) {
const client = subscription.subscribe({
next: (msg: PostSubscriptionEvent) => {
console.log('timeline subscription fired');
console.log(msg);
const post = msg?.value?.data?.onCreateTimeline?.post;
if (post) {
appDispatch(subscriptionPosts(post));
}
},
});
unsubscribe = () => {
client.unsubscribe();
};
}
return unsubscribe;
}, [appDispatch, currentUsername])
firebaseのfirestoreやmongoDBのmongooseのようにもうちょっとシンプルな方法を用意してくれるとうれしいなと思った次第。
ひととおりTypeScript化ができたところで、Reduxの学習をかねてWorkshopのソース内でreducerを利用している部分、useStateを利用している部分をRedux Toolkitで管理する形に書き換えていきます。
今回はPost部分とUserの認証情報の2つのスライスを作成して管理するように実装しました。
さいごに
AmplifyのTODOアプリ作成のチュートリアル、SNSアプリ作成のworkshopをそれぞれTypeScript化しながら体験してみることで、Amplifyでのアプリケーション作成のイメージを少し理解することができたかなと思います。
これからAmplifyを使ってみようと思ってい方はぜひこの2つのチュートリアルとWorkshop試してみてください！
成果物
参考になるかは微妙ですが書き換えソースも下記に置いておきます。（amplifyリソースは入っていませんのでこのままでは動作はしません）