From f0d9beef0117559173ffe5b89c316932b83271c3 Mon Sep 17 00:00:00 2001 From: Kohei Watanabe Date: Tue, 20 Jul 2021 21:06:36 +0900 Subject: [PATCH] =?UTF-8?q?=E6=9B=B8=E3=81=84=E3=81=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/README.md | 31 +++++++++++++++---- docs/SUMMARY.md | 2 +- docs/create-heroku-database.md | 11 ------- docs/create-heroku-postgres.md | 31 +++++++++++++++++++ docs/create-project.md | 26 ++++++++++++++-- docs/create-rest-endpoint.md | 49 ++++++++++++++++++++++++++---- docs/create-table.md | 24 +++++++++++---- docs/create-vue-app.md | 19 +++++++++++- docs/insert-and-select.md | 50 ++++++++++++++++++++++++++++--- docs/permissions.md | 54 ++++++++++++++++++++++++++++++++++ docs/preparation.md | 4 ++- 11 files changed, 263 insertions(+), 38 deletions(-) delete mode 100644 docs/create-heroku-database.md create mode 100644 docs/create-heroku-postgres.md diff --git a/docs/README.md b/docs/README.md index 7059c41..6dd2442 100644 --- a/docs/README.md +++ b/docs/README.md @@ -1,8 +1,29 @@ # Hasuraで作るREST API -Hasuraを使用してPostgresデータベースに接続したREST APIを構築します。 +Hasuraを使用してPostgresデータベースに接続したREST APIを構築し、それを利用したWebアプリを作成します。 - +これからこのハンズオンで作成するのは次のようなWebアプリです。 + + + + +構成としては下記の通りです。 + +- [Hasura Cloud](https://cloud.hasura.io/) - すぐに利用可能なHasuraの環境 +- [Heroku Postgres](https://jp.heroku.com/postgres) - すぐに利用可能なデータベース +- [CodeSandbox](https://codesandbox.io/) - フロントエンドのオンライン開発環境 +- [Vue 3](https://v3.vuejs.org/) - プログレッシブWebフレームワーク +- [Quill](https://quilljs.com/) - リッチテキストエディター + +それではさっそく作っていきましょう! diff --git a/docs/SUMMARY.md b/docs/SUMMARY.md index 6e889fa..bf6234f 100644 --- a/docs/SUMMARY.md +++ b/docs/SUMMARY.md @@ -5,7 +5,7 @@ - [Herokuのアカウント登録](signup-heroku.md) - [Hasura Cloudのアカウント登録](signup-hasura-cloud.md) - [Hasura Cloudプロジェクトの作成](create-project.md) -- [Heroku Databaseへの接続](create-heroku-database.md) +- [Heroku Postgresへの接続](create-heroku-postgres.md) - [テーブルの作成](create-table.md) - [GraphQLによるデータの挿入と取得](insert-and-select.md) - [REST APIエンドポイントの作成](create-rest-endpoint.md) diff --git a/docs/create-heroku-database.md b/docs/create-heroku-database.md deleted file mode 100644 index 1a528db..0000000 --- a/docs/create-heroku-database.md +++ /dev/null @@ -1,11 +0,0 @@ -# Heroku Databaseへの接続 - -![](https://lh3.googleusercontent.com/ekEWHMTkf2qak5oItkay-scmzeiwiaUtNXBvBdCSVSJ3qG25oVc8O_25S4SEWZskj6NqWSfW2eENeEy3iJ94mTw1SmhnL7tONbS_qHHZsgI4l_6sEIdmMnXTEpmF34-aDS2I3Pi7EQ=w1280) - -![](https://lh3.googleusercontent.com/46sywF2Hl5GGAEsXhAkhhni4_NHcB-kcHiqqJNkZs0HS7zvFy9FZmmWEGLtP-i6F-msLnuJlKPFst8j8_QTCnTcDi1B5diKByqOVDAeuZ_PL1Fo_pDl_DLOBscL-O8ucqZA05_xyjA=w1280) - -![](https://lh3.googleusercontent.com/RngvddZ704jKqqPfxGiSEdEkBemMwrz3jApRJQhRqL2Cr0MoV-SxVljdLaglM0XFwkcnIpWFD9zVyUtn9n55LGKG78gJPec6HRrWXrcLbNNnHztycmF-sphYYBkHaRT7Y87nzihdNg=w1280) - -![](https://lh3.googleusercontent.com/-0FkvEXZO0FQz0YvrNFdh8JmAMZPbIpaIRygkE4F8xb4Z3ZLMRH9y5pny48-bj-i2nnhbDuqcPKokbznD7X_APL-MkjDeHaxQsJjFyGEY6AxvMBsHwfNOjxPdjQA6S3dGrW1Cz4o0g=w1280) - -![](https://lh3.googleusercontent.com/vJU-gDZJwSNJYAaoq4qu4lAnxhNYGE70rPxmtGct_GyPT9oH0FoZ8_2O8bcI9ocaWHaJsE0Rqv2WHZzO6Z0yGuMkaCtMYjdIKTHW2aREaCYid73GlT6FWLZH9JIQPp_P9QOez0EOBw=w1280) diff --git a/docs/create-heroku-postgres.md b/docs/create-heroku-postgres.md new file mode 100644 index 0000000..e6a4d81 --- /dev/null +++ b/docs/create-heroku-postgres.md @@ -0,0 +1,31 @@ +# Heroku Postgresへの接続 + +Hasuraでデータの保存と検索を実現するためにデータベースを接続します。 + +このハンズオンでは、データベースとしてHeroku Postgresを利用します。 + +Hasura Cloudのプロジェクトの[Launch Console]ボタンからHasuraのコンソール画面にアクセスして、Heroku Postgresへの接続を行うことが可能です。 + +まず、コンソール > [Data Manager] にアクセスします。 + +![](https://lh3.googleusercontent.com/ekEWHMTkf2qak5oItkay-scmzeiwiaUtNXBvBdCSVSJ3qG25oVc8O_25S4SEWZskj6NqWSfW2eENeEy3iJ94mTw1SmhnL7tONbS_qHHZsgI4l_6sEIdmMnXTEpmF34-aDS2I3Pi7EQ=w1280) + +[Create Heroku Database]を選択し、データベース作成パネルを表示します。 + +![](https://lh3.googleusercontent.com/46sywF2Hl5GGAEsXhAkhhni4_NHcB-kcHiqqJNkZs0HS7zvFy9FZmmWEGLtP-i6F-msLnuJlKPFst8j8_QTCnTcDi1B5diKByqOVDAeuZ_PL1Fo_pDl_DLOBscL-O8ucqZA05_xyjA=w1280) + +[Create Database]ボタンを選択し、Heroku Postgresデータベースを新たに作成します。Herokuとの連携を行う際に、初回アクセス時にはHerokuの承認画面が表示されます。[Allow (許諾)]を選択するとHerokuとの連携が完了します。 + +![](https://lh3.googleusercontent.com/RngvddZ704jKqqPfxGiSEdEkBemMwrz3jApRJQhRqL2Cr0MoV-SxVljdLaglM0XFwkcnIpWFD9zVyUtn9n55LGKG78gJPec6HRrWXrcLbNNnHztycmF-sphYYBkHaRT7Y87nzihdNg=w1280) + +一連の手順でHeroku Postgresデータベースを作成すると、Hasuraは自動的にデータベースへの接続を開始します。 + +![](https://lh3.googleusercontent.com/-0FkvEXZO0FQz0YvrNFdh8JmAMZPbIpaIRygkE4F8xb4Z3ZLMRH9y5pny48-bj-i2nnhbDuqcPKokbznD7X_APL-MkjDeHaxQsJjFyGEY6AxvMBsHwfNOjxPdjQA6S3dGrW1Cz4o0g=w1280) + +しばらく待つと、データベースへの接続が完了します。 + +これであなたはHasuraを利用可能になりました 🎉 + +![](https://lh3.googleusercontent.com/vJU-gDZJwSNJYAaoq4qu4lAnxhNYGE70rPxmtGct_GyPT9oH0FoZ8_2O8bcI9ocaWHaJsE0Rqv2WHZzO6Z0yGuMkaCtMYjdIKTHW2aREaCYid73GlT6FWLZH9JIQPp_P9QOez0EOBw=w1280) + +それでは実際にHasuraを使ってみましょう! diff --git a/docs/create-project.md b/docs/create-project.md index b328629..d7d7fac 100644 --- a/docs/create-project.md +++ b/docs/create-project.md @@ -1,12 +1,32 @@ # Hasura Cloudプロジェクトの作成 -もし、プロジェクトが存在しない場合、まずプロジェクトの作成を行います。 -すでに存在するプロジェクトを利用する場合は不要です。 +Hasuraを利用するためにHasura Cloudのプロジェクトを作成します。 + +プロジェクトが存在しない場合、まずプロジェクトの作成を行います。 +すでに存在するプロジェクトを利用する場合は、下記のプロジェクトの作成の作業は不要です。 + +## プロジェクトの作成 + +[Hasura Cloudのトップページ](https://cloud.hasura.io/)にアクセスすると、プロジェクトの一覧画面が表示され、[Create Project]ボタンから、プロジェクト作成フォームを開きます。 + +プロジェクト作成フォームに必要事項を入力します。ここでは例として次の項目を入力します。 + +| 項目 | 説明 | 例 | +| --------------------- | --------------------- | ---------------------------------------------------------------- | +| Choose a pricing plan | 料金プランの選択 | Free Tier - 無料 | +| Select a region | リージョン | US West (N. California) - 無料で利用可能なデフォルトのリージョン | +| Enter a project name | プロジェクト名 (任意) | `memo-demo` | + +必要事項を入力後、[Create project]ボタンを押し、プロジェクトを作成します。 ![](https://lh3.googleusercontent.com/S5JmjK-PKTK1BW7Q0CXxQWfLpy4T8j96n3QqKy9p88fsLXPDX056uR3bC4MlhBJcSUjcSWNoJrc9mkXq3PG4S-Aax55awJrP65MSx6_dpavy0tNEsAE4YGu3X0IImUjYdE_7QesTHA=w1280) +プロジェクトの作成が完了すると、画面上にプロジェクトの詳細が表示されます。 + ![](https://lh3.googleusercontent.com/OHk3SnMo5zFoulppRwCkAahq6wr4JImN88XgSlkHYeZFhPTd1pHQp4CUXmDDRTAdmsk9kNCJLLzZ0x_yCH1kcnLQ9Zbkq2lm5KIJblFDBU56nJ3sSdposGBFVyUwrEMBXgNmox297A=w1280) +画面上にプロジェクトが表示されれば完了です。 + ![](https://lh3.googleusercontent.com/LL6dz4np-O19_runPMbCD5-d3kYc1_QUcc1bJif4Yx7dNr16SY4k6037kV82aqg1FrcYff3QGOFTqzyh9ReYyp-j43EtGJercr7dKxdBxcd1nDzPm9bbWFgJOYjhwNDUsGRWNV2d2g=w1280) -画面上にプロジェクトが表示されれば完了です。 +プロジェクトの[Launch Console]ボタンからHasuraのコンソール画面にアクセスして、Heroku Postgresへの接続を行いましょう。 diff --git a/docs/create-rest-endpoint.md b/docs/create-rest-endpoint.md index 94bd0a1..43175e3 100644 --- a/docs/create-rest-endpoint.md +++ b/docs/create-rest-endpoint.md @@ -1,9 +1,23 @@ # REST APIエンドポイントの作成 -![](https://lh3.googleusercontent.com/WpWX9e0zMECBpUvdyFXyPAxKauwgpNVAwGSLzjt3M99aeL9t90CrqZrdpEf39uh5SKPBeYvfMX0i6KvTuXf39_rccK1o7aohwFL_OCmz0TX-i0Lc2tlJpk5gPMdTrEqzKyElKvPzEQ=w1280) +ここまでは、GraphQLを使った操作を試しました。この時点でリクエストヘッダーに秘密鍵を与えれば、実際にGraphQL APIエンドポイントを利用することが可能です。 -get page -GET page/:id +このハンズオンでは最後にREST APIエンドポイントを作成し、WebアプリケーションからGraphQL APIではなくREST APIを利用します。ここからはそのための手順を説明します。 + +## 設計 + +Hasuraは、GraphQL QueryをREST化することが可能です。このハンズオンでは、次の仕様のREST APIエンドポイントを作成します。 + +| 名称 | HTTPメソッドとパス | 説明 | +| ------------ | ------------------------ | ------------------------------------------------------------------------------------------------------------------- | +| ページの取得 | `GET /api/rest/page/:id` | 割り当てられた識別子 `id` をもつページを取得します。レスポンスボディには `data.page.content` プロパティを含みます。 | +| ページの更新 | `PUT /api/rest/page/:id` | 割り当てられた識別子 `id` をもつページを更新します。リクエストボディには `content` プロパティを与えます。 | + +## 「ページの取得 (`GET page/:id`)」エンドポイントの作成 + +ページを取得するためのREST APIエンドポイントを作成します。 + +コンソールのトップ画面のGraphiQLのパネルにアクセスし、次のコードを書きます。 ```graphql query getPage($id: Int!) { @@ -14,12 +28,23 @@ query getPage($id: Int!) { } ``` +![](https://lh3.googleusercontent.com/WpWX9e0zMECBpUvdyFXyPAxKauwgpNVAwGSLzjt3M99aeL9t90CrqZrdpEf39uh5SKPBeYvfMX0i6KvTuXf39_rccK1o7aohwFL_OCmz0TX-i0Lc2tlJpk5gPMdTrEqzKyElKvPzEQ=w1280) + +[REST]ボタンを選択し、REST APIエンドポイント作成フォームを表示します。次の必要事項を入力し、作成ボタンを選択しエンドポイントを作成します。 + +| 項目 | 説明 | 内容 | +| -------- | ----------------------- | ---------- | +| Name | エンドポイントの名称 | get page | +| Location | `/api/rest/` 以降のパス | `page/:id` | +| Method | HTTPメソッド | `GET` | + ![](https://lh3.googleusercontent.com/fKkiNL4nWYUtiG8OfAk8mhTxdJuZQclLLBWheVclr4EcC7ggsZzpI4mTYGQ-6pvWZWApa2acaUJKVjOFy5oHwqhtVfn4arYX01B29yUvOQwWPRIq-6JOBFNTfP_FxoNJNRaseYEMbw=w1280) -![](https://lh3.googleusercontent.com/yeEU1sF7DR3VA7tWn-FDofpFIfK93q2hssqnn25c_-0bnAbo8WdzdTahQ3HVst7hCniT5hJqHgWS9Pu9zTQorHxErtdp8PSFJmgsU6R0G_oPzF__Up-aSdHQWFc_uuWyVU_Ux50jlw=w1280) +## 「ページの更新 (`PUT page/:id`)」エンドポイントの作成 -put page -PUT page/:id +ページを更新するためのREST APIエンドポイントを作成します。 + +コンソールのトップ画面のGraphiQLのパネルにアクセスし、次のコードを書きます。 ```graphql mutation putPage($id: Int!, $content: jsonb!) { @@ -33,4 +58,16 @@ mutation putPage($id: Int!, $content: jsonb!) { } ``` +![](https://lh3.googleusercontent.com/yeEU1sF7DR3VA7tWn-FDofpFIfK93q2hssqnn25c_-0bnAbo8WdzdTahQ3HVst7hCniT5hJqHgWS9Pu9zTQorHxErtdp8PSFJmgsU6R0G_oPzF__Up-aSdHQWFc_uuWyVU_Ux50jlw=w1280) + +[REST]ボタンを選択し、REST APIエンドポイント作成フォームを表示します。次の必要事項を入力し、作成ボタンを選択しエンドポイントを作成します。 + +| 項目 | 説明 | 内容 | +| -------- | ----------------------- | ---------- | +| Name | エンドポイントの名称 | put page | +| Location | `/api/rest/` 以降のパス | `page/:id` | +| Method | HTTPメソッド | `PUT` | + ![](https://lh3.googleusercontent.com/NUKkifFtbdjjti9tga3fHp0-iIc4e48Cz2HrBOUngbaDad5an29hJ9ucn7kG3MXLIyZw80wpfG3aZZrS9kDEYUnl9cV3VB0oZ6LqIRKbHlgUGBF2PJJC9ifLCABZhmn1Rv8u9mZ8qw=w1280) + +作成すると作成したREST APIエンドポイントが表示されます。 diff --git a/docs/create-table.md b/docs/create-table.md index d0fbd57..bc2b134 100644 --- a/docs/create-table.md +++ b/docs/create-table.md @@ -1,12 +1,24 @@ # テーブルの作成 +[Data Manager] > [View Database] > [Add a new table]を選択し、新しいテーブルを作成します。 + +このハンズオンでは、次のデータモデルを作成します。 + +テーブル名: `pages` - メモ帳のページ + +| 項目 | 型 | 説明 | +| --------- | ------------------------ | ----------------------------------------------------------------------------------- | +| `id` \* | Integer (auto-increment) | ページの識別子 | +| `content` | JSONB | ページの本文 ([Quill Deltaオブジェクト](https://quilljs.com/docs/delta/)を使う想定) | + +\*: Primary Key + +データモデルのための必要事項を入力し、テーブルを作成します。Primary Keyとして `id` (ページの識別子)を選択します。 + ![](https://lh3.googleusercontent.com/nZo9b7TW32khyJBmmxzrk8GZfqWsPSfmPYdNAyIJ_L3tCek0p8zZl6JCCB7zXvmUbFHtnk2LYnzAimbImFC_ZS0aekik4MUr6jkX9wQTAaLCYXit8k1HgAw9aDvCmcGSl7WM_Ue7Rg=w1280) - +テーブルの作成が完了するとその作成したテーブルの[Modify]パネルが表示されます。作成したテーブルへの変更はHasuraによって自動的に追従されます。 ![](https://lh3.googleusercontent.com/L8V_vs7cCKWrzUlnh9H78aDCgPYjFaLxiZNN76lte8zU3NR9x1-jEy91Hx5hpulA4EfCcdPww7dbBqhzBXUBku6HdGKUvPm_4JZFmZSlX9Xy2mmjCRsyktfZuivCr98CdP-pfJX2uQ=w1280) + +これでHasuraからGraphQLによるデータへの操作が可能になります。 diff --git a/docs/create-vue-app.md b/docs/create-vue-app.md index 2cf44b5..b8f8fdb 100644 --- a/docs/create-vue-app.md +++ b/docs/create-vue-app.md @@ -1,6 +1,17 @@ # Vueアプリケーションの作成 -https://qfmmc.csb.app/ +[![Edit in CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/vue3-hasura-rest-qfmmc?file=/src/App.vue) + +このリンクからCodeSandboxにアクセスし、Vueアプリケーションを作成します。 + + + + + +なお、URLに含まれる `memo-demo` は、Hasura Cloudプロジェクト名によって異なるので、適宜自分の作成したプロジェクトに合わせて読み替えてください。 ```vue