React を使って外部APIをコールし、取得したレスポンスを画面に反映する簡単なサンプルです。
一連のサンプルコードは こちら にプッシュしています。
サンプル実行キャプチャ
実行環境について
下記の環境で動かしています。
- Ubuntu 20.04.4 LTS (Focal Fossa)
- go version go1.21.6 linux/amd64
- Node v16.20.2
- yarn 1.22.21
- React 18.2.0
- TypeScript 4.9.5
外部APIについて
【Go言語】go/gin で簡単なREST API を作成 にて作成したAPI を使用しています。
事前準備
docker-compose.yml
version: '3'
services:
postgres:
image: 'postgres:14'
container_name: postgres_gin_rest
environment:
POSTGRES_USER: user
POSTGRES_PASSWORD: password
POSTGRES_DB: sample
TZ: Asia/Tokyo
- '5432:5432'
volumes:
- './db-store:/var/lib/postgresql/data'
docker-compose up -d
コマンドで PostgreSQL を起動した後、
docker exec -it postgres_gin_rest psql -U user -d sample
コマンドでDBに接続して、下記CREATE文でUserテーブルを作成しておきます。
CREATE TABLE "user" (
id SERIAL PRIMARY KEY,
name VARCHAR(255),
age INT
);
React を使って外部APIをコールサンプル実装
モデル定義
api/model/User.ts
type User = {
Id?: number;
Name: String;
Age: number;
};
export default User;
- APIレスポンスを受けるUserモデルを定義
APIコール処理
api/UserApi.ts
import User from "./model/User";
export const fetchUserData = async (id: number): Promise<User | null> => {
try {
if (!response.ok) {
console.error("Error fetching user data. Status:", response.status);
return null;
}
const userData: User = responseData.user;
return userData;
} catch (error) {
console.error("Error fetching user data:", error);
return null;
}
};
export const fetchUserDatas = async (): Promise<User | null> => {
try {
if (!response.ok) {
// レスポンスが成功でない場合の処理
console.error("Error fetching user data. Status:", response.status);
return ;
}
return users || ;
} catch (error) {
console.error("Error fetching user data:", error);
return null;
}
};
export const RegisterUser = async (userData: User): Promise<User | null> => {
try {
method: "POST",
headers: {
},
});
if (!response.ok) {
console.error("Error registering user. Status:", response.status);
return null;
}
return registeredUser;
} catch (error) {
console.error("Error registering user:", error);
return null;
}
};
export const UpdateUser = async (userData: User): Promise<User | null> => {
try {
const response = await fetch(apiUrl, {
method: "PUT",
headers: {
},
});
if (!response.ok) {
console.error("Failed to update user");
return null;
}
return updatedUser;
} catch (error) {
console.error("Error updating user:", error);
return null;
}
};
export const deleteUser = async (userId: number): Promise<boolean> => {
try {
const response = await fetch(apiUrl, {
method: "DELETE",
headers: {
},
});
if (!response.ok) {
console.error("Failed to delete user");
return false;
}
return true;
} catch (error) {
console.error("Error deleting user:", error);
return false;
}
};
ここまででモデルとAPI呼び出し処理ができたので、画面コンポーネントを作成していきます。
トップ画面
component/UserComponent.tsx
import { useEffect, useState } from "react";
import { Link } from "react-router-dom";
const UserComponent: React.FC = () => {
const [userList, setUserList] = useState<User | null>(null);
const [isDeleteDialogOpen, setDeleteDialogOpen] = useState<boolean>(false);
const [deletingUserId, setDeletingUserId] = useState<number | null>(null);
useEffect(() => {//➀
const fetchData = async () => {
const data = await fetchUserDatas();
setUserList(data);
};
fetchData();
}, );
const handleDeleteClick = (userId: number) => {
setDeletingUserId(userId);
setDeleteDialogOpen(true);
};
const handleDeleteConfirm = async () => {
if (deletingUserId !== null) {
try {
const isDeleted = await deleteUser(deletingUserId);
if (isDeleted) {
setDeleteDialogOpen(false);
const updatedData = await fetchUserDatas();
setUserList(updatedData);
} else {
console.error("Error deleting user");
}
} catch (error) {
console.error("Error deleting user data:", error);
}
}
};
const handleDeleteCancel = () => {
setDeletingUserId(null);
setDeleteDialogOpen(false);
};
return (
<div>
{userList ? (
<div>
<h2>User List</h2>
<table className="user-table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div>
<Link to={"/user/register"}>新規ユーザー追加</Link>//➂
</div>
{/* 削除ダイアログ */}
{isDeleteDialogOpen && (
<div className="delete-dialog">
<p>本当に削除しますか？</p>
<button onClick={handleDeleteConfirm}>はい</button>
<button onClick={handleDeleteCancel}>いいえ</button>
</div>
)}
</div>
) : (
<p>ユーザーデータを読み込んでいます...</p>//➁
)}
</div>
);
};
export default UserComponent;
- 副作用フック (useEffect) を使ってコンポーネント読み込み完了後に fetchUserDatas() を呼び出し、APIからユーザーの一覧を取得します
- データの読み込みが完了するまでは、「ユーザーデータを読み込んでいます...」を表示しておきます
- 「新規ユーザー追加」および「更新」をクリックしたら、それぞれの画面に遷移します
- 「削除」をクリックしたら、削除画面に遷移します
登録画面
component/user-register/UserRegister.tsx
import { useState } from "react";
import { Link } from "react-router-dom";
const UserRegister: React.FC = () => {
const [name, setName] = useState<string>("");//➀
const [age, setAge] = useState<number>(0);
const [isSubmitSuccess, setIsSubmitSuccess] = useState<boolean>(false);
const handleRegister = async () => {
const registeredUserData = await RegisterUser({
Name: name,
Age: age,
});
if (registeredUserData) {
setIsSubmitSuccess(true);
}
};
return (
<div>
<div>
<h2>User Register</h2>
<div style={{ marginBottom: "10px" }}>
<label>Name</label>
<input
type="text"
/>
</div>
<div style={{ marginBottom: "10px" }}>
<label>Age</label>
<input
type="number"
/>
</div>
<div>
<button onClick={handleRegister} style={{ marginRight: "5px" }}>
登録
</button>
<Link to={"/"}>戻る</Link>
</div>
{isSubmitSuccess && <p>登録しました。</p>}
</div>
</div>
);
};
export default UserRegister;
- useState フックで画面の入力状態を保持します
更新画面
component/user-update/UserUpdate.tsx
import { useEffect, useState } from "react";
import { Link, useParams } from "react-router-dom";
const UserUpdate: React.FC = () => {
const { id } = useParams();//➀
const numericId: number = id ? parseInt(id, 10) : 0;
const [user, setUser] = useState<User | null>(null);
const [updatedName, setUpdatedName] = useState<string>("");
const [updatedAge, setUpdatedAge] = useState<number | undefined>(undefined);
const [isUpdateSuccess, setIsUpdateSuccess] = useState<boolean>(false);
/>
</div>
<div>
<button onClick={handleUpdate} style={{ marginRight: "5px" }}>
Update
</button>
<Link to={"/"}>戻る</Link>
</div>
{isUpdateSuccess && <p>更新しました。</p>}
</div>
) : (
<p>Loading user data...</p>
)}
</div>
);
};
export default UserUpdate;
- useParams フックでURLパラメーターを取得します。後で記載するルーティング設定にて、
<Route path="user/update/:id" element={<UserUpdate />} />の定義を行っており、ここで指定している :id の値を読み込んでいます
ルーティング設定
App.tsx
import React from "react";
import UserComponent from "./component/UserComponent";
import { Route, Router, Routes } from "react-router-dom";
import UserUpdate from "./component/user-update/UserUpdate";
import UserRegister from "./component/user-register/UserRegister";
const App: React.FC = () => {
return (
<Routes>
<Route path="/" element={<UserComponent />} />
<Route path="user/register" element={<UserRegister />} />
<Route path="user/update/:id" element={<UserUpdate />} />
</Routes>
);
};
export default App;
React router を使用して設定しています。パスに対してどのコンポーネントを読み込むか、シンプルにルーティングを定義できます。詳しくは下記を参照ください。
Feature Overview v6.22.0 | React Router
以上、サンプルになります。
画面UIやファイル・コンポーネント名などの構成はかなり雑です... 今回は React で外部APIをコールしてレスポンスを画面に反映するまでの簡単な流れを記載したかったので、そのほかの要素は省いています。
*1:user) => (
<tr key={user.Id}>
<td>{user.Id}</td>
<td>{user.Name}</td>
<td>{user.Age}</td>
<td>
<Link to={`/user/update/${user.Id}`}>更新</Link>//➂
{" | "}
<button onClick={() => handleDeleteClick(user.Id!)}>
削除//➃
</button>
</td>
</tr>
*2:) => {
const fetchData = async () => {
const data = await fetchUserData(numericId);
setUser(data);
};
fetchData();
}, []);
const handleUpdate = async () => {
if (user) {
const updatedUserData = await UpdateUser({
Id: numericId,
Name: updatedName || user.Name,
Age: updatedAge !== undefined ? updatedAge : user.Age,
});
if (updatedUserData) {
setIsUpdateSuccess(true);
}
}
};
return (
<div>
{user ? (
<div>
<h2>User Update</h2>
<p>ID: {user.Id}</p>
<p>Name: {user.Name}</p>
<p>Age: {user.Age}</p>
<div style={{ marginBottom: "10px" }}>
<label>Updated Name:</label>
<input
type="text"
/>
</div>
<div style={{ marginBottom: "10px" }}>
<label>Updated Age:</label>
<input
type="number"
