はじめに
React × Supabaseで地図アプリを作っていたとき、
Supabaseにデータが入っているのに、ブラウザのコンソールにData fetched: Array(0) と表示されてピンが出ない状態に悩みました。
結論から言うと、RLS(Row Level Security)が有効になっていたのが原因でした。
現象
Supabaseのテーブルにデータは存在している
しかし、React側でselect('*') を実行しても Array(0) が返る
エラーは出ない(=通信は成功している)
試したこと
.env のURLやAnonキーを確認
テーブル名・カラム名のスペルを確認
Supabaseコンソールでデータの存在を確認
それでもデータは取れなかった
原因:RLS(Row Level Security)
Supabaseでは、新しく作ったテーブルに RLSが自動で有効 になっていることがあります。
RLSが有効だと、認証されたユーザーしかデータを読み取れません。
解決方法
Supabase → 「Table Editor」→ 対象テーブルを開く
上部メニューの「Enable RLS」を確認
青色(有効)になっていたらクリックして 無効化(灰色) に変更
これで匿名アクセスでもデータを取得できるようになり、
Data fetched: [ {...} ] と表示されて地図上にピンを出すことができました。
まとめ
Supabaseで「データが空」「エラーは出ない」場合、
まず RLSが有効になっていないか確認する。