作成したレコードのID取得
イベント作成と一覧が確認できたので、個別表示と編集のためのパラメータを渡す方法を調べる。
参考:
API.graphql の戻り値を見ればよさそうだけど、長いIDだ、、 まあとりあえずはこれで。
router.js にパラメータ追加して、props: true
も設定。
props設定が抜けていて、“Variable ‘id’ has coerced Null value for NonNull type ‘ID!’“エラーに悩まされた。
Read morePOSTS
イベント作成と一覧が確認できたので、個別表示と編集のためのパラメータを渡す方法を調べる。
参考:
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各画面で必要な項目からデータ構造を作る。
項目名 | name | type |
---|---|---|
ID | id | int |
イベント名 | title | string |
開催日時 | start | timestamp |
開催場所 | place | string |
公開期間From | open | datetime |
公開期間To | close | datetime |
作成者 | author | int -> user.id |
項目名 | name | type |
---|---|---|
ID | id | int |
ユーザー名 | username | string |
項目名 | name | type |
---|---|---|
ID | id | int |
イベントID | eventid | int -> event.id |
ユーザーID | userid | int -> user.id |
項目名 | name | type |
---|---|---|
ID | id | int |
イベントID | eventid | int -> event.id |
資料URL | url | string |
項目名 | name | type |
---|---|---|
ID | id | int |
イベントID | eventid | int -> event.id |
ユーザーID | userid | int -> user.id |
コメント | comment | string |
投稿日時 | postedAt | datetime |
とりあえずこんな感じかな。
Read morehttps://docs.amplify.aws/start/getting-started/auth/q/integration/vue/#authentication-with-amplify この手順
amplify add auth
amplify push
ログイン情報を保存するために、storeを使用する
参考:
npm install vuex@4
次はデータの読み書き
各画面のファイルができたので、必要な項目を並べていく作業。 uiflow作ったときにおおむね書いておいたので、それをタグに落としていく。
一通り書いて、ボタンで画面遷移もするようにできた。
次はログイン機能をつける(チュートリアルでやったやつ)。
参考にしたページ
このままだと動かなかったので、vue-routerをバージョンアップ。最初インストールしたときはバージョン指定しなかったせいか3系が入っていた。
npm install vue-router@4
これで画面が表示されるようになった。
昨日洗い出した画面をとりあえず書いてみる。
画面遷移にvue-routerを使うので、インストールしておく。
npm install vue-router
各画面は、src/views/
に置く。
$ ls -1 src/views/
CancelConfirm.vue
EntryConfirm.vue
EventCreate.vue
EventDetail.vue
EventEdit.vue
EventSearch.vue
Login.vue
MyPage.vue
Top.vue
ファイル作るところまでで今日は時間切れ。。
初日にあげた機能をもとに、必要な画面とそれらの関連を考える。
- イベントページの作成と編集
- イベントの検索
- 参加エントリー、キャンセル
- コメント投稿
UI Flow図で書いてみた。
https://github.com/umemak/eventsite/blob/main/doc/uiflow.txt
とりあえずこんな感じかな。 足りないところがあればその都度足していく方針で。