はじめに
開発中usersテーブルにフォームに入力したデータをonSubmitで登録しても紐づいたuser_skillテーブルにデータが追加されない箇所でつまずいたため、解決方法を共有させていただきます。なお、Foreign key設定はsupabaseで設定済です。
このように記述していました。
users.ts
import { supabase } from "../../utils/supabase";
import { UserParams } from "../../domain/users";
export async function insertUsers(user: UserParams): Promise<UserParams>{
const { data, error } = await supabase.from("users").insert([{
user_id: user.user_id, name: user.name, description: user.description, github_id: user.github_id, qiita_id: user.qiita_id, x_id: user.x_id}])
.select();
if (error) {
console.error(error);
throw error;
}
if (!data || data.length === 0) {
throw new Error("データがありません");
}
user.skill_id?.map(skillId => ({
user_id: user.user_id,
skill_id: skillId
}))
const { error: skillError} = await supabase.from("user_skill").insert([{user_id: user.user_id, skill_id: user.skill_id}])
if (skillError) {
console.error(skillError);
throw skillError;
}
return data[0] as UserParams;
}
解決方法
user_skillテーブルにuser.skill_idを配列で追加する
Promiseの型もuserとskillsの2つ指定し、最後に返すことでコンソールでも出力できました。
users.ts
import { supabase } from "../../utils/supabase";
import { UserParams } from "../../domain/users";
export async function insertUsers(user: UserParams): Promise<{user: UserParams; skills: {skill_id: number }[]}>
{
const { data, error } = await supabase.from("users").insert([{
user_id: user.user_id, name: user.name, description: user.description, github_id: user.github_id, qiita_id: user.qiita_id, x_id: user.x_id}])
.select();
if (error) {
console.error(error);
throw error;
}
if (!data || data.length === 0) {
throw new Error("データがありません");
}
const { error: skillError} = await supabase.from("user_skill")
.insert(user.skill_id?.map(skillId => ({
user_id: user.user_id,
skill_id: skillId
})));
if (skillError) {
console.error(skillError);
throw skillError;
}
return {
user: data[0] as UserParams,
skills: user.skill_id?.map(skillId => ({ skill_id: skillId})) || []
};
}
Register.tsx
// supabaseにデータ登録
const onSubmit = async (data: UserParams) => {
try {
const insertedUser = await insertUsers(data);
console.log("insertedUserの中身", insertedUser)
} catch (error) {
console.error(error);
}
};
おわりに
これで、意図した動きになってくれました。