Fetching data with Supabase js and Next.js 13 returns an object (rather than array)

Question

I am trying to fetch data from a Supabase table called "profiles" with Next.js 13 and the app directory. I am trying to take advantage of the new next.js fetching methods, my code looks as follows:

export const revalidate = 0;

  export default async function getData() {
    const { data: profiles } = await supabase
      .from("profiles")
      .select("*")
      .eq("is_host", true);
    console.log(profiles);
    return { profiles };


 if (!profiles) {
   return <p>No hosts found</p>
 }

The problem is that this code seems to be wrapping the array returned from Supabase in an object.

The data returned looks like this:

{data: 
[
{
"id":"feef56d9-cb61-4c4d-88c6-8a8d7c9493d9",
"updated_at":null,
"username":"username",
"full_name":"Full Name",
"avatar_url":"URL",
"website":null,
"is_host":true,
"bio":null,
"languages":6
}
]
}

When I use useState and useEffect instead, the data is returned as expected, and I can map through it.

Does anybody have an idea why, and how I can prevent that? Thanks in advance.

Answer 1

I worked it out, through a subsequent error, which I as able to solve thanks to the question I asked here and the helpful hints I got from there.

return { profiles };

Returns the array inside an object. By removing the {} I was able to fetch the array inside of it.