Amplify mock使ってみる
データ構造試行錯誤するのに、毎回amplify pushすると時間がかかって面倒だなーと思っていたら、ローカルで動かせるモックがあることを知った。 Codespacesでまともに動くかわからないけど、やってみる。
$ amplify mock api
動いた。けど、アプリから接続しに行くのがIPアドレス指定で、Codespacesの公開ポートになってない。
Read morePOSTS
データ構造試行錯誤するのに、毎回amplify pushすると時間がかかって面倒だなーと思っていたら、ローカルで動かせるモックがあることを知った。 Codespacesでまともに動くかわからないけど、やってみる。
$ amplify mock api
動いた。けど、アプリから接続しに行くのがIPアドレス指定で、Codespacesの公開ポートになってない。
Read moremanyToMany だとエントリーとキャンセルの状態を持たせるのができなさそうなので、やっぱり関連を持つテーブルを作ったほうがよさそう(おとといの設計
そしてレコード追加の書き方がわからない・・
昨日、多対多の関連を持つテーブルを定義したけれど、manyToManyの指定で実現できるのではないか。
テーブル内に配列を持たせるのではなく、当初考えていたように、関連を管理するテーブルを別に用意したほうが良いのではないだろうか。
$ amplify push
? Do you want to update code for your updated GraphQL API Yes
? Do you want to generate GraphQL statements (queries, mutations and subscription) based on your schema types?
This will overwrite your current graphql queries, mutations and subscriptions Yes
気軽に全部Yesしたけど、結構待たされる。
GraphQL(というかDynamoDB?)のデータ設計は最初にしっかりやらないといけないのかなぁ。 作りながら試行錯誤したい派。
Read moreイベントにエントリーできるようにする。
参加者をイベント内の配列で持たせようとしたのだけれど、追加の方法がわからない。。
array.push() で行けるだろうと思ったけどエラー。
IDの指定ができるようになったので、それをキーに更新ができるようにする。
ここはそれほど悩むことなく実装できた。
イベント作成と一覧が確認できたので、個別表示と編集のためのパラメータを渡す方法を調べる。
参考:
API.graphql の戻り値を見ればよさそうだけど、長いIDだ、、 まあとりあえずはこれで。
router.js にパラメータ追加して、props: true
も設定。
props設定が抜けていて、“Variable ‘id’ has coerced Null value for NonNull type ‘ID!’“エラーに悩まされた。
Read more昨日、CORSのエラーで躓いていたものの解決ができず。
チュートリアルでやったときも出てたのか、出てなかったのか今となっては確認が面倒。。
問題の切り分けをするため、hostingに上げてみる。
$ amplify add hosting
? Select the plugin module to execute Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment)
? Choose a type Manual deployment
$ amplify publish
エラーは出ない。やっぱりCodespacesで実行したときの問題らしい。だけど毎回publishするのは時間もかかるしコストもかかるから避けたい。
Read moreデータの格納先ができたので、画面からデータ登録できるようにしてみる。
参考:
Codespacesでnpm run serve
で実行してアクセスすると、ブラウザのコンソールにInvalid Host/Origin header
が出ている。
package.json を修正して回避。codespaces前提だけど。
"serve": "vue-cli-service serve --public ${CODESPACE_NAME}.githubpreview.dev",
参考:
次に出たのはCORSのエラー。 今日はここまで。
Read moreデータ構造を考えたので、それをスキーマ情報に落としていく。
の前にamplifyコマンド
$ amplify add api
? Select from one of the below mentioned services: GraphQL
? Here is the GraphQL API that we will create. Select a setting to edit or continue Continue
? Choose a schema template: One-to-many relationship (e.g., “Blogs” with “Posts” and “Comments”)
⚠️ WARNING: your GraphQL API currently allows public create, read, update, and delete access to all models via an API Key. To configure PRODUCTION-READY authorization rules, review: https://docs.amplify.aws/cli/graphql/authorization-rules
GraphQL schema compiled successfully.
Edit your schema at /workspaces/eventsite/amplify/backend/api/eventsite/schema.graphql or place .graphql files in a directory at /workspaces/eventsite/amplify/backend/api/eventsite/schema
✔ Do you want to edit the schema now? (Y/n) · yes
? Choose your default editor: Visual Studio Code
Edit the file in your editor: /workspaces/eventsite/amplify/backend/api/eventsite/schema.graphql
✅ Successfully added resource eventsite locally
✅ Some next steps:
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud
schema.graphql ファイルを編集してpush。
Read more