初心者向け：SupabaseのDBテーブルへCSVインポートする方法

## SupabaseがCSVを読み込んでくれない。

DBにSupabaseを使ったWEBアプリの開発をしている際、サンプルデータをSupabaseに読み込ませたいのに詳細エラーも表示されずなかなか追加されなくて苦労したのですが解決したので正しい方法をお伝えします。

## この記事の対象読者
- Supabaseを使っていてDBにサンプルデータを入れたい人
- CSVファイル、CSV形式のテキストがうまく読み込まれない人

## 具体的な方法
Supabaseのデータベースにとあるテーブルへレコードを追加したい時は`TableEditor`から操作できます。

:::note warn
プロジェクト、テーブルを作成済みの前提で進めます
:::

### ①`Table Editor`を開きます
Supabaseへログインし、プロジェクトを開いた後、下記の<font color="red">赤丸</font>部分をクリックしてください。
![スクリーンショット 2024-01-24 23.55.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457345/7374f10b-bcd7-be79-c0a0-03e20848577d.png)

するとテーブルのリストが出てくるので（画像ではuserのところ）クリックすれば、そのテーブルに登録されているレコードなどが見れます。今はレコードを一個だけ登録してあります。
ユニークな値（重複が禁止された一意の値のこと）に設定しているのはemailのみです。
![スクリーンショット 2024-01-25 0.06.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457345/e4b887f0-73c1-cb75-56af-4ff7e1238dbd.png)

### ②CVS形式でレコードを追加する
ここからが本題です。下記の`Import data from CSV`をクリックして追加していきましょう。
![スクリーンショット 2024-01-25 0.11.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457345/fda62983-c418-83e9-5d08-d1cd5cd33f32.png)

すると下記のように、CSVファイルをアップロードするかテキスト貼り付けで追加するか選べます。
今回はテキスト貼り付けでいきましょう。④で貼り付けます!
$\tiny{※ファイルアップロードでも気をつける点は同じです。}$
![スクリーンショット 2024-01-25 0.14.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457345/8f275a0c-c5e8-36ec-2611-209d4e30905a.png)

### ③追加用のcsvを用意する
追加する前に当たり前ですが、素材のCSVを作成しましょう。
僕はgoogleのスプレッドシートを使います。ExcelでもOK。
スプレッドシートで新規作成し、こんな感じでフィールドと値を用意すればOK!
![スクリーンショット 2024-01-25 0.52.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457345/4e673f09-1925-c297-c55c-3fa33a580ebb.png)


<font color="red">僕は追加に成功する前、`created_at`や`updated_at`の値はnullを許可するようにしているし値は入力しなくていいだろう、とめんどくさがって値を空にしていました。これが原因で読み取ってくれませんでした。
値は適当でもいいのでAIなどに頼んでパパッと作成してもらいましょう。</font>
テスト時に、idフィールドで`uuid`を使いたいと言う方はこちらの自動生成サイトが便利なのでぜひ使ってください。

https://uuid.doratool.com/


### ④作ったデータを読み込ませる
次は最終段階です。これらをコピーしてSupabaseへ貼り付けましょう。
CSVファイルとして保存して読み込ませても問題ありません。`Preview data to be imported`のところにも反映されていますね。
![スクリーンショット 2024-01-25 0.53.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457345/325392ea-f126-0911-04d1-4cb3d3aa86c4.png)
上記画像、右下の<font color="green">`Import data`</font>ボタンを押すと、、、


![スクリーンショット 2024-01-25 0.55.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457345/f13ce3db-2f5d-0173-ee26-5e53295671e9.png)
**ちゃんと反映されました!! 😇**
こんな感じでCSVから登録できます。

## エラーも出ずに追加できない時
SupabaseのCSV読み込みはエラーがわかるように出す時と、`Import data`をクリックしてからロードするそぶりを見せてただ追加されない、エラーも出ない、というイケズな挙動を取る時があります。
そんな時は開発者ツールからヒントが得られるかもしれません。
※開発者ツールはページ上でF12キークリック
CSVも読み込まれず、ページ上でエラーもでない時の開発者ツールのコンソールは下記でした。
![スクリーンショット 2024-01-25 1.17.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457345/1a1e6652-b624-354c-f0ef-c2730e76b17a.png)

messageの部分を日本語訳すると<font color="red">`データのインポートに失敗しました: タイムスタンプとタイムゾーンの入力構文が無効です`</font>ということでした。この時は`created_at`や`updated_at`の値を入力していませんでした。未入力を怒られているわけではないのでエラーの内容も正しいとは言えませんが日時を入力するところに問題があるのか？という漠然とした推測だけはできます笑 よければ覗いてみてください🔭


## 試してみてなぜか追加できた例
先ほどのテーブルに`age`フィールドを追加してnullを許容できる & int8型に設定しました。
先ほどは`created_at`や`updated_at`の値を入力しないと読み込んでくれなかったのですが、
今度はCSVに`age`フィールドの見出しも入れずに読み込ませたのですがなぜか読み込むことができました🧐
`created_at`や`updated_at`もnullを許容する設定にしていたのですが、、
csvに値を入力しないといけないものとそうでなものがあるのかもです。
お気づきの点等ございましたらコメントくださいm(__)m