Rork アプリで Supabase のデータが取得できない・表示されないときの原因別対処法

-- こういう状態のとき、データが取れません
-- ポリシー: なし（有効: RLS ON）
-- すべてのユーザーからのアクセスが拒否されます
 
-- 開発中の一時的な確認用（本番では使わない）
create policy "Allow all for testing"
  on your_table
  for select
  using (true);

-- ユーザー自身のデータだけを読めるようにする（一般的なパターン）
create policy "Users can read their own data"
  on your_table
  for select
  using (auth.uid() = user_id);

// ❌ 問題のあるパターン（認証確認なしでデータ取得）
useEffect(() => {
  fetchData(); // ログイン前に実行される可能性がある
}, []);
 
// ✅ 認証後にだけ取得するパターン
useEffect(() => {
  const { data: { subscription } } = supabase.auth.onAuthStateChange(
    (event, session) => {
      if (session) {
        fetchData(); // ログイン済みのときだけ実行
      }
    }
  );
  return () => subscription.unsubscribe();
}, []);

// supabase.ts（または supabase/client.ts）
import { createClient } from '@supabase/supabase-js';
 
const supabaseUrl = process.env.EXPO_PUBLIC_SUPABASE_URL\!;
const supabaseAnonKey = process.env.EXPO_PUBLIC_SUPABASE_ANON_KEY\!;
 
// 開発中はこのログで確認できます
console.log('Supabase URL:', supabaseUrl?.substring(0, 30) + '...');
 
export const supabase = createClient(supabaseUrl, supabaseAnonKey);

// ❌ async/await が正しく使えていない例
const fetchData = () => {
  const { data, error } = supabase
    .from('posts')
    .select('*');
  // Promiseをawaitしていないため、dataはundefinedのまま
  setData(data); 
};
 
// ✅ 正しい非同期処理
const fetchData = async () => {
  const { data, error } = await supabase
    .from('posts')
    .select('*');
  
  if (error) {
    console.error('取得エラー:', error.message);
    return;
  }
  
  setData(data ?? []); // nullの場合は空配列にする
};

// ❌ コンポーネントがマウントされる前に状態が設定される可能性
const MyComponent = () => {
  const [posts, setPosts] = useState(null); // ← null で初期化
  
  fetchData(); // useEffect外で呼び出している
  
  return <View>{posts.map(...)}</View>; // nullのときにクラッシュ
};
 
// ✅ 正しいパターン
const MyComponent = () => {
  const [posts, setPosts] = useState<Post[]>([]); // 空配列で初期化
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    const fetch = async () => {
      setLoading(true);
      const { data, error } = await supabase.from('posts').select('*');
      if (\!error && data) setPosts(data);
      setLoading(false);
    };
    fetch();
  }, []);
  
  if (loading) return <ActivityIndicator />;
  if (posts.length === 0) return <Text>データがありません</Text>;
  
  return <FlatList data={posts} renderItem={...} />;
};

// ❌ テーブル名・カラム名が違う
const { data } = await supabase
  .from('userProfiles') // ← Supabase側はuser_profilesかもしれない
  .select('userName'); // ← Supabase側はuser_nameかもしれない
 
// ✅ ダッシュボードで確認した正確な名前を使う
const { data } = await supabase
  .from('user_profiles') // ← ダッシュボードで確認
  .select('user_name, avatar_url, created_at');