Supabaseで records.map is not a function のエラー

はじめに

Supabaseからデータを取得して一覧表示しようとしたところ下記のエラーが出ました。

Uncaught TypeError: records.map is not a function

supabaseFunction.js

// エラーが出たコード
import { supabase } from "../utils/supabase";

export const getALLRecords = async () => {
  const result = await supabase.from("study-record").select("*");
  return result;
};

呼び出し側（main.jsx）ではuseEffectで取得しmapで表示しています。

main.jsx

useEffect(() => {
  const getRecords = async () => {
    const data = await getALLRecords();
    setRecords(data);
  };
  getRecords();
}, []);

// ...

{records.map((record) => (
  <div key={record.id}>
    {record.title}{record.time}時間
  </div>
))}

原因

supabase.from(...).select("*")が返すのは配列そのものではなく、次のような構造のオブジェクトでした。

{
  data: [
    {
      id: 1,
      title: "記録1",
      time: 10,
      create_at: "2026-05-29T02:36:25.386992+00:00"
    }
  ],
  error: null,
  status: 200,
  statusText: "OK"
}

解決方法

オブジェクトからdata（レコードの配列）を取り出す。

supabaseFunction.js

import { supabase } from "../utils/supabase";

export const getALLRecords = async () => {
  const { data } = await supabase.from("study-record").select("*");
  return data;
};

おわりに

is not a function系のエラーは、変数に入っている値の型を勘違いしているときに出がちです。困ったら console.log(data) で中身を確認するのが一番の近道でした。