Error fetching supabase data: Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

はじめに

テーブルデータを画面に映し出すさいにエラーが起こりました。

問題

GetTableLibs

import { supabase } from "../utils/supabase";
import { useParams } from "react-router-dom";

import { Users } from "../domain/GetTableDomain";

export const getTableLib = async () => {
    const { id } = useParams();
    const res = await supabase.from("users").select("*").eq("user_id", id);
    if (res.error) {
        throw new Error(res.error.message);
    }
    const data = res.data.map((data) => {
        return Users.newUsers(data.user_id, data.name, data.description, data.github_id, data.qiita_id, data.x_id);
    })
    return data;
}

Card

import { memo, FC, useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import { getTableLib } from "../lib/GetTableLib";
import { Users } from "../domain/GetTableDomain";


export const Card: FC = memo(() => {
    const { id } = useParams();
    const [supabaseData, setSupabaseData] = useState<Users[]>([]);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        const fetchData = async () => {
            try {
                const data = await getTableLib();
                setSupabaseData(data);
            } catch (error) {
                console.error("Error fetching supabase data:", error);
            }
        };
        fetchData();
        setLoading(false);
    }, [id, loading]);

    if (loading) {
        return <p>Loading...</p>;
    }

    return (
        <div>
            {supabaseData.map((user) => (
                <p key={user.user_id}>{user.name}</p>
            ))}
        </div>
    )
});

解決方法

カスタムフックの使い方を間違えていました。

useStateやuseParamsはなどは、コンポーネント内かカスタムフックでしか使えないです。

要は、export const getTableLib = async (id: string) => {
const { id } = useParams();

と記載しているのは間違いです。
コンポーネント内かどうか見分けるには、その関数が自身で呼び出しているのか（getTableLib）、Reactから呼び出されているのかで異なります。

GetTableLibs

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

import { Users } from "../domain/GetTableDomain";

export const getTableLib = async (id: string) => {
    const res = await supabase.from("users").select("*").eq("user_id", id);
    if (res.error) {
        throw new Error(res.error.message);
    }
    const data = res.data.map((data) => {
        return Users.newUsers(data.user_id, data.name, data.description, data.github_id, data.qiita_id, data.x_id);
    })
    return data;
}

Card

import { memo, FC, useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import { getTableLib } from "../lib/GetTableLib";
import { Users } from "../domain/GetTableDomain";


export const Card: FC = memo(() => {
    const { id } = useParams();
    const [supabaseData, setSupabaseData] = useState<Users[]>([]);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        const fetchData = async () => {
            try {
                const data = await getTableLib(String(id));
                setSupabaseData(data);
            } catch (error) {
                console.error("Error fetching supabase data:", error);
            }
        };
        fetchData();
        setLoading(false);
    }, [id, loading]);

    if (loading) {
        return <p>Loading...</p>;
    }

    return (
        <div>
            {supabaseData.map((user) => (
                <p key={user.user_id}>{user.name}</p>
            ))}
        </div>
    )
});

おわりに