Strapiへデータの更新ができないです。
解決したいこと
RemixからStrapiへデータを更新できるようにしたいです。
StrapiのコンテンツタイプにあるデータのuserAge(Integer), userName(text)を更新しようとしています。
発生している問題・エラー
データを更新しようをすると、以下のエラーがでてきます。
{"data":null,"error":{"status":404,"name":"NotFoundError","message":"Not Found","details":{}}}
また、以下のように、Strapiの管理画面と取得したものとのidが異なるのも気になります。
こういうものなのでしょうか。
該当するソースコード
import { json, LoaderFunction, ActionFunction } from "@remix-run/node";
import { useLoaderData, useFetcher } from "@remix-run/react";
import "./styles/updateUser.css";
interface StrPractice {
id: number;
documentId: string;
userAge: number;
userName: string;
createdAt: string;
updatedAt: string;
publishedAt: string;
locale: string | null;
}
interface ApiResponse {
data: StrPractice[];
}
interface ApiMessage {
success: boolean;
message?: string;
}
export const loader: LoaderFunction = async () => {
const apiUrl = `${process.env.STRAPI_URL_BASE}/api/str-practices`;
const response = await fetch(apiUrl, {
headers: {
Authorization: `Bearer ${process.env.STRAPI_API_TOKEN}`,
},
});
if (!response.ok) {
return json<ApiMessage>({ success: false, message: "Failed to fetch data from Strapi" }, { status: response.status });
}
const data: ApiResponse = await response.json();
return json(data);
};
export const action: ActionFunction = async ({ request }) => {
const formData = await request.formData();
const userId = formData.get("userId");
const userName = formData.get("userName");
const userAge = formData.get("userAge");
const apiUrl = `${process.env.STRAPI_URL_BASE}/api/str-practices/${userId}`;
console.log("API URL:", apiUrl);
const response = await fetch(apiUrl, {
method: "PUT",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${process.env.STRAPI_API_TOKEN}`,
},
body: JSON.stringify({
data: [{
userName,
userAge: parseInt(userAge as string, 10),
}],
}),
});
const responseBody = await response.json();
console.log("Strapi response:", responseBody);
if (!response.ok) {
return json<ApiMessage>({ success: false, message: responseBody.message || "Failed to update data in Strapi" }, { status: response.status });
}
return json<ApiMessage>({ success: true, message: "User updated successfully!" });
};
export default function UpdateUser() {
const { data } = useLoaderData<ApiResponse>();
const fetcher = useFetcher<ApiMessage>();
return (
<div>
<h1>User List</h1>
<ul>
{data.map((user: StrPractice) => (
<fetcher.Form method="post" key={user.id}>
<p>Id: {user.id}</p>
<input type="number" name="userId" value={user.id}/>
<label>
Name:
<input className="uu_input" type="text" name="userName" defaultValue={user.userName}/>
</label>
<label>
Age:
<input className="uu_input" type="number" name="userAge" defaultValue={user.userAge}/>
</label>
<button className="uu_btn" type="submit">Update</button>
</fetcher.Form>
))}
</ul>
{fetcher.data?.success && <p>{fetcher.data.message}</p>}
{fetcher.data && !fetcher.data.success && <p>Error: {fetcher.data.message}</p>}
</div>
);
}
自分で試したこと
以下のようにid部分を1,2,3,4でそれぞれ試しましたが同様のエラーでダメでした。
curl -X GET http://127.0.0.1:1337/api/str-practices/2 -H "Authorization: Bearer YOUR_API_TOKEN"
URLへの直接アクセスも同様エラーです。
http://127.0.0.1:1337/api/str-practices/2
↓これならアクセスできて、以下が返ってきます。
http://127.0.0.1:1337/api/str-practices
{"data":[{"id":2,"documentId":"xfmmnvfbhd7f88abt5jiokks","userAge":11,"userName":"wanwan","createdAt":"2024-09-22T03:28:15.049Z","updatedAt":"2024-09-22T03:28:15.049Z","publishedAt":"2024-09-22T03:28:15.057Z","locale":null},{"id":4,"documentId":"h8inmkcalhume7larq04j29j","userAge":14,"userName":"piyopiyo","createdAt":"2024-09-22T03:28:48.983Z","updatedAt":"2024-09-22T03:28:48.983Z","publishedAt":"2024-09-22T03:28:48.995Z","locale":null}],"meta":{"pagination":{"page":1,"pageSize":25,"pageCount":1,"total":2}}}
Strapiの[USERS&PERMISSIONS PLUGIN＞Roles]の設定はコンテンツタイプのアクセス権限をselect allにしています。
どうかお力添えをお願いいたします。
0
