SupabaseがCSVを読み込んでくれない。
DBにSupabaseを使ったWEBアプリの開発をしている際、サンプルデータをSupabaseに読み込ませたいのに詳細エラーも表示されずなかなか追加されなくて苦労したのですが解決したので正しい方法をお伝えします。
この記事の対象読者
- Supabaseを使っていてDBにサンプルデータを入れたい人
- CSVファイル、CSV形式のテキストがうまく読み込まれない人
具体的な方法
Supabaseのデータベースにとあるテーブルへレコードを追加したい時はTableEditorから操作できます。
プロジェクト、テーブルを作成済みの前提で進めます
①Table Editorを開きます
Supabaseへログインし、プロジェクトを開いた後、下記の赤丸部分をクリックしてください。
するとテーブルのリストが出てくるので（画像ではuserのところ）クリックすれば、そのテーブルに登録されているレコードなどが見れます。今はレコードを一個だけ登録してあります。
ユニークな値（重複が禁止された一意の値のこと）に設定しているのはemailのみです。
②CVS形式でレコードを追加する
ここからが本題です。下記のImport data from CSVをクリックして追加していきましょう。
すると下記のように、CSVファイルをアップロードするかテキスト貼り付けで追加するか選べます。
今回はテキスト貼り付けでいきましょう。④で貼り付けます!
$\tiny{※ファイルアップロードでも気をつける点は同じです。}$
③追加用のcsvを用意する
追加する前に当たり前ですが、素材のCSVを作成しましょう。
僕はgoogleのスプレッドシートを使います。ExcelでもOK。
スプレッドシートで新規作成し、こんな感じでフィールドと値を用意すればOK!
僕は追加に成功する前、created_atやupdated_atの値はnullを許可するようにしているし値は入力しなくていいだろう、とめんどくさがって値を空にしていました。これが原因で読み取ってくれませんでした。
値は適当でもいいのでAIなどに頼んでパパッと作成してもらいましょう。
テスト時に、idフィールドでuuidを使いたいと言う方はこちらの自動生成サイトが便利なのでぜひ使ってください。
④作ったデータを読み込ませる
次は最終段階です。これらをコピーしてSupabaseへ貼り付けましょう。
CSVファイルとして保存して読み込ませても問題ありません。Preview data to be importedのところにも反映されていますね。
上記画像、右下のImport dataボタンを押すと、、、
ちゃんと反映されました!! 😇
こんな感じでCSVから登録できます。
エラーも出ずに追加できない時
SupabaseのCSV読み込みはエラーがわかるように出す時と、Import dataをクリックしてからロードするそぶりを見せてただ追加されない、エラーも出ない、というイケズな挙動を取る時があります。
そんな時は開発者ツールからヒントが得られるかもしれません。
※開発者ツールはページ上でF12キークリック
CSVも読み込まれず、ページ上でエラーもでない時の開発者ツールのコンソールは下記でした。
messageの部分を日本語訳するとデータのインポートに失敗しました: タイムスタンプとタイムゾーンの入力構文が無効ですということでした。この時はcreated_atやupdated_atの値を入力していませんでした。未入力を怒られているわけではないのでエラーの内容も正しいとは言えませんが日時を入力するところに問題があるのか？という漠然とした推測だけはできます笑 よければ覗いてみてください🔭
試してみてなぜか追加できた例
先ほどのテーブルにageフィールドを追加してnullを許容できる & int8型に設定しました。
先ほどはcreated_atやupdated_atの値を入力しないと読み込んでくれなかったのですが、
今度はCSVにageフィールドの見出しも入れずに読み込ませたのですがなぜか読み込むことができました🧐
created_atやupdated_atもnullを許容する設定にしていたのですが、、
csvに値を入力しないといけないものとそうでなものがあるのかもです。
お気づきの点等ございましたらコメントくださいm(__)m