Amplifyによるデータフェッチと非同期通信について

ほぼ答えに近いコードが掲載してるのが以下。Amplify graphQL Clientを使ったデータフェッチの、

https://qiita.com/otanu/items/2c522a652e5843a5e2c5

また、Amplifyの、getStaticPropsやgetServerSidePropsを使わない、データフェッチのやり方が以下。

https://docs.amplify.aws/lib/graphqlapi/query-data/q/platform/js/

じゃあ、そういう「答え」になる理由は何なのか？ということになると、大前提に「非同期通信のプロセスについて」がある。

以下、それらに関連する、重要な概念等の情報は以下。

■Promiseについて

Promiseオブジェクトは、作成された時点では Pending （待機）状態です。その後のコールバック関数内で resolve() （解決）された時点で Fulfilled 状態となり、then() が実行されます。逆に reject() （失敗）が呼び出された時点で Rejected 状態となり、catch() が実行されます。つまり resolve() も reject() も呼び出されない間は pending 状態のまま、次のチェーンには進みません。

状態が一度 Pending から変化すると、その後の状態は二度と変化しないことが約束されています。resolve() または reject() は一度しか実行されません。

https://kde.hateblo.jp/entry/2018/11/01/042432

https://hidekazu-blog.com/javascript-promise/

https://qiita.com/bow_arrow/items/a88cf7a444fb6045b8e4

■await式　について

async/await式は、Promiseのプロセスがわかった前提で使わないと、思わぬ落とし穴にひっかかる。Async Functionはasync/awaitとも呼ばれることがあります。この呼ばれ方からも分かるように、Async Functionとawait式は共に利用します。

await式はAsync Function内でのみ利用できます。 await式は右辺のPromiseインスタンスがFulfilledまたはRejectedになるまで、その行（文）で非同期処理の完了を待ちます。そしてPromiseインスタンスの状態が変わると、次の行（文）から処理を再開します。

https://azu.github.io/promises-book/#async-function-await

■in 演算子について

in 演算子は、指定されたプロパティが指定されたオブジェクトにある場合に true を返します。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/in

getServerSidePropsが使えるのは、pages内の一つのページに対して一つだけ。

それはgetStaticPropsも同様だった。

いくらコンポーネントを分けても、どちらからはundefiedになる。
ISR/SSG/SSRのサンプルコード

https://zuma-lab.com/posts/amplify-next-simple-deploy
Pre-rendering　＝　Server-side Rendering みたいなやつの総称。SEO のために必要だったりします。

そしてPre-rendering には 2種類ある。

・ Static Generation: JSのビルド時にページを生成する方法

・ Server-side Rendering: HTTPリクエストが来た時にページを生成する方法

https://www.utakata.work/entry/nextjs/3
AmplifyのAPIをuseSWRで取得する方法がどうしても見つからない。。。。

【公式】https://swr.vercel.app/docs/getting-started
https://zenn.dev/thim/articles/d09cc8500d47d3216907

https://github.com/TakahiroHimi/Next-SWR-sample

https://maku.blog/p/vm2ft83/

https://note.com/fz5050/n/nd16f20e932ad

そして、この内容自体はしっかり動く。ただし、Amplifyの「API」を同じように持ってきても、エラーになる。
SWRのBound Mutate　に関する記事

https://dev.classmethod.jp/articles/tried-swr-bound-mutate-with-nextjs/