ユーザーが投稿した自分のブログのタイトルと作成日を表示するマイページを作りたいです。どのようにsupabaseからデータ取得して画面表示すればいいのかうまくいきません。
supabaseからuser.idに紐づくブログのtitleとcreated_atを取得してconsole.logでは表示できているのですが、return 部分で反映できず画面表示できません。
"use client";
import { format } from "date-fns";
import { useSupabase } from "../supabase-provider";
import useStore from "../../../store";
const BlogList = () => {
const { supabase } = useSupabase();
const { user } = useStore();
// supabaseからリスト取得
const getBlogList = async () => {
const { data: blogsData } = await supabase
.from("blogs")
.select("id, title, created_at")
.eq("profile_id", user.id)
.order("created_at", { ascending: false }); // 作成日順に並び替え
// リストが見つからない場合
if (!blogsData) return;
console.log(blogsData); // 正常にデータ取得できている
};
getBlogList();
return (
<ul>
{blogsData.map((blog: any) => {
return (
<li key={blog.id}>
<p>{blog.title}</p>
<small>
{format(new Date(blog.created_at), "yyyy/MM/dd")}
</small>
</li>
);
})}
</ul>
);
};
export default BlogList;
(1) // supabaseからリスト取得 の部分で、
const getBlogList = async () => {
と
};getBlogList();
を付けず、
async は
const BlogList = async () => {
に付けてみたところ、Objects are not valid as a React child (found: [object Promise]). のエラーが出てしまいました。
(2)ユーザーidに紐づけてデータ取得するためには、サーバーコンポーネントではなくクライエントコンポーネントで書くのかと思い試しましたが、根本的に間違っているのでしょうか。
初学者で基本の理解もまだ充分ではないのですが、先生の動画や記事に出会ってから挫折せず続けられるようになりました。よろしくお願いいたします。