mirror of
https://github.com/kou029w/hasura-rest-hands-on.git
synced 2025-02-23 17:15:15 +00:00
73 lines
4 KiB
Markdown
73 lines
4 KiB
Markdown
# REST APIエンドポイントの作成
|
|
|
|
ここまでは、GraphQLを使った操作を試しました。この時点でリクエストヘッダーに秘密鍵を与えれば、実際にGraphQL APIエンドポイントを利用することが可能です。
|
|
|
|
このハンズオンでは最後に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!) {
|
|
page: pages_by_pk(id: $id) {
|
|
id
|
|
content
|
|
}
|
|
}
|
|
```
|
|
|
|

|
|
|
|
[REST]ボタンを選択し、REST APIエンドポイント作成フォームを表示します。次の必要事項を入力し、作成ボタンを選択しエンドポイントを作成します。
|
|
|
|
| 項目 | 説明 | 内容 |
|
|
| -------- | ----------------------- | ---------- |
|
|
| Name | エンドポイントの名称 | get page |
|
|
| Location | `/api/rest/` 以降のパス | `page/:id` |
|
|
| Method | HTTPメソッド | `GET` |
|
|
|
|

|
|
|
|
## 「ページの更新 (`PUT page/:id`)」エンドポイントの作成
|
|
|
|
ページを更新するためのREST APIエンドポイントを作成します。
|
|
|
|
コンソールのトップ画面のGraphiQLのパネルにアクセスし、次のコードを書きます。
|
|
|
|
```graphql
|
|
mutation putPage($id: Int!, $content: jsonb!) {
|
|
page: insert_pages_one(
|
|
object: { id: $id, content: $content }
|
|
on_conflict: { constraint: pages_pkey, update_columns: content }
|
|
) {
|
|
id
|
|
content
|
|
}
|
|
}
|
|
```
|
|
|
|

|
|
|
|
[REST]ボタンを選択し、REST APIエンドポイント作成フォームを表示します。次の必要事項を入力し、作成ボタンを選択しエンドポイントを作成します。
|
|
|
|
| 項目 | 説明 | 内容 |
|
|
| -------- | ----------------------- | ---------- |
|
|
| Name | エンドポイントの名称 | put page |
|
|
| Location | `/api/rest/` 以降のパス | `page/:id` |
|
|
| Method | HTTPメソッド | `PUT` |
|
|
|
|

|
|
|
|
作成が完了すると作成したREST APIエンドポイントの一覧が表示されます。
|