「Next.js13とSupabaseのブログ完全版」でユーザーが投稿した自分のブログリストを表示させたい

解決済

Next.js

初心者

データベース

ポッキー

2023/07/17 18:06

実現したいこと

ユーザーが投稿した自分のブログのタイトルと作成日を表示するマイページを作りたいです。どのように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;

自分で試したこと

(１) // supabaseからリスト取得の部分で、

const getBlogList = async () => {と
};getBlogList();
を付けず、

async は
const BlogList = async () => {
に付けてみたところ、Objects are not valid as a React child (found: [object Promise]). のエラーが出てしまいました。

(２)ユーザーidに紐づけてデータ取得するためには、サーバーコンポーネントではなくクライエントコンポーネントで書くのかと思い試しましたが、根本的に間違っているのでしょうか。

補足情報

初学者で基本の理解もまだ充分ではないのですが、先生の動画や記事に出会ってから挫折せず続けられるようになりました。よろしくお願いいたします。

回答 2件

回答するにはログインが必要です

ポッキー

1年以上前

はる先生、ありがとうございます。表示できました。データ取得から表示までの理解をさらに深めることができました。これからも、はる先生の講座で学んでいきたいと思います。

はる@講師

1年以上前

user.idの初期値は空なので、useEffectを使用して、user.idに値が格納されたら、getBlogList関数をコールしてみてください。

  useEffect(() => {
    if (user.id) {
      getBlogList()
    }
  }, [user])

取得したblogsDataは、useStateを利用して変数に格納して、その値を表示するのがよいです。

"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;