React（Next.js/GraphQL）からHasuraを使ったCRUD操作のためのStateの定義やformコンポーネントの作成

はじめに

CRUD操作のための処理部分をこれまで作成してきました。

詳細👇

今回からは、ブラウザを通じでCRUD操作を行うためのインターフェイス部分を何回かに分けて作成していきます。

具体的には下記を作成していきます。

• Stateの定義 👈 本記事はコレについて書いてます
• クリックイベントの処理
• コンポーネント（レイアウト）の用意
  • form部分 👈 本記事はコレについて書いてます
  • ユーザーの一覧を表示させる部分

最終的なゴール

以下のような構成のアプリを作ることです。

目的

• 仕事で使っている技術のキャッチアップと復習
• 使う可能性がある技術の理解度向上

Stateの定義

CRUD操作をお好なうと、ユーザーの新規作成や、更新の処理が発生します。

ここでは、ユーザーの編集用のStateを作成します。

useStateを使います。

pages/hasura-crud.tsx

import { VFC, useState, FormEvent } from 'react'
// 省略

const HasuraCRUD: VFC = () => {
  const [editedUser, setEditedUser] = useState({ id: '', name: '' })
  // 省略
  return (  // 省略 
)}

初期値はidとnameを空文字で定義しています。

コンポーネント（レイアウト）の用意

form部分とSubmit部分を作成していきます。

pages/hasura-crud.tsx

<form
  className="flex flex-col justify-center items-center"
  onSubmit={handleSubmit}
>
// ユーザーが情報を入力できるinputフォームを作成予定
// submitボタンのコンポーネント作成予定
</form>

formコンポーネントのonSubmit処理には関数handleSubmitがセットされています。

処理内容は次回紹介します。

それでは、formコンポーネントの中に、ユーザーが情報を入力できるinputフォームを作成していきます。

pages/hasura-crud.tsx

<form
  className="flex flex-col justify-center items-center"
  onSubmit={handleSubmit}
>
  <input
    className="px-3 py-2 border border-gray-300"
    placeholder="New user ?"
    type="text"
    value={editedUser.name}
    onChange={(e) =>
      setEditedUser({ ...editedUser, name: e.target.value })
    }
  />
  // submitボタンのコンポーネント作成予定
</form>

onChangeの内容を見ると、Typingのたびに、先ほど定義たsetEditedUser関数が実行されます。

中身の説明をすると、オブジェクト{}の中で既存の要素...editedUserはそのままに、name: e.target.valueこんな感じで名前だけを追加しています。

それでは、formコンポーネントの中に、もう一つ、submitボタンを作成します。

pages/hasura-crud.tsx

<form
  className="flex flex-col justify-center items-center"
  onSubmit={handleSubmit}
>
  <input
    className="px-3 py-2 border border-gray-300"
    placeholder="New user ?"
    type="text"
    value={editedUser.name}
    onChange={(e) =>
      setEditedUser({ ...editedUser, name: e.target.value })
    }
  />
  <button
    disabled={!editedUser.name}
    className="disabled:opacity-40 my-3 py-1 px-3 text-white bg-indigo-600 hover:bg-indigo-700 rounded-2xl focus:outline-none"
    data-testid="new"
    type="submit"
  >
    {editedUser.id ? 'Update' : 'Create'}
  </button>
</form>

disabledを見ると、disabled={!editedUser.name}要するに空の場合は

disabled={!''} → disabled={true} になるのでボタンが押せなくなります。

その時のstyle（tailwindcss）も作成しておきます。

className="disabled:opacity-40 my-3 py-1 px-3 text-white bg-indigo-600 hover:bg-indigo-700 rounded-2xl focus:outline-none"

ボタン内の文言は、editedUser.idが

• 存在すれば更新 （'Update'）
• 無ければ、新規作成 （'Create'）

という条件で出し分けられるようにします。

次回は、formコンポーネントのonSubmit処理の関数handleSubmitの内部処理を見ていきます。

今日のところは以上です。

アウトプット100本ノック実施中