Supabase と Next.js を使用して、親テーブルにデータを挿入する際に、子テーブルにも同時にデータを挿入する方法を紹介します。
基本設定
まずは以下のように Supabase クライアントを設定します。
import { createClient } from '@supabase/supabase-js';
const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
export const supabase = createClient(supabaseUrl, supabaseAnonKey);
Supabase の設定
Supabase プロジェクトを作成し、必要なテーブルを設定します。
例えば、orders テーブルが親テーブルであり、order_items テーブルが子テーブルであると仮定します。それぞれのテーブル定義は以下のようになります。
orders テーブル
| カラム名 | データ型 | 説明 |
|---|---|---|
| id (主キー) | 整数 | 注文の一意の識別子 |
| customer_name | テキスト | 顧客の名前 |
order_items テーブル
| カラム名 | データ型 | 説明 |
|---|---|---|
| id (主キー) | 整数 | 注文明細の一意の識別子 |
| order_id | 外部キー | 注文を参照するための orders テーブルの主キー |
| product_name | テキスト | 商品の名前 |
| quantity | 整数 | 商品の数量 |
親テーブルと子テーブルへのデータ挿入処理
親テーブルと子テーブルに同時にデータを挿入する関数を作成します。この関数では、まず親テーブルにデータを挿入し、その後子テーブルにデータを挿入します。
import { supabase } from "../lib/supabaseClient";
export async function createOrder(order, items) {
// 親テーブルへの挿入
const { data, error } = await supabase
.from("orders")
.insert([{ customer_name: order.customer_name }])
.select();
if (error) {
throw error;
}
if (!data[0].id) {
throw new Error('Failed to insert record');
}
// 子テーブルへの挿入
const orderItems = items.map(item => ({
order_id: data[0].id,
product_name: item.product_name,
quantity: item.quantity
}));
const { error: orderItemsError } = await supabase
.from("order_items")
.insert(orderItems);
if (orderItemsError) {
throw orderItemsError;
}
}この createOrder 関数では、まず ordersテーブルにデータを挿入し、その後order_itemsテーブルにデータを挿入しています。親テーブルのデータ挿入が成功した場合、そのレコードの ID を使って子テーブルのデータを挿入します。これで、親テーブルと子テーブルへのデータ挿入処理ができるかと思います。
関連記事
