# REST APIエンドポイントの作成 ここからは、Hasuraを使ってREST APIエンドポイントを作成し、実際にWebアプリケーションから利用する方法を説明します。 ## 設計 HasuraはGraphQL APIサーバーとして利用するだけでなく、REST APIサーバーとして利用することもできます。このハンズオンでは、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エンドポイントの一覧が表示されます。