"TypeError: result is not iterable" -> Nextjs 13 data fetching with getStaticParams

Question

I am fetching data from a supabase database with the new fetching methods of Next.js 13. The fetching of my users to my listing page works well, and even when I click on their cards, the URL changes to the expected slug.

However, I seem to be unable to fetch the data unto the user's page, where it results in the following error:

TypeError: result is not iterable

My listings page looks like this:

export const revalidate = 60;

async function getData() {
  const {
    data
  } = await supabase.from("profiles").select().eq("is_host", true);
  return { data };
}

export default async function Hosts() {
  const data = await (getData());

  return ( 
<div > 
{data.data!.map((profile) => ( 
<div >
<Link href = {`/hosts/${profile.username}`}
          key = {profile.id} >
          </Link>
        ))
      } </div>

The profile page looks like this:

export const revalidate = 60;

export async function generateStaticParams() {
  const { data: profiles } = await supabase.from("profiles").select("username");

const hostPath = profiles?.map((profile) => ({
  params: {host: profile.username},
}))
return {
  hostPath,
  fallback: false,
}
}

export default async function HostPage({ params: { username } }: {params: {username: string}}) {
  const {data: profile} = await supabase.from('profiles').select().match({username}).single()

return (
<div>
      <pre>{JSON.stringify(profile, null, 2)}</pre>
</div>

Both are serverside rendered.

Does anybody have any ideas? Thank you in advance.

UPDATE: After removing the {} around the data in the return statement of the fetching method, everything works as expected (I was wrapping the array in an object, which can't be mapped).

Answer 1

is not iterable is when you are trying to iterate through a type that is not iterable.

here

const { data: profiles } =  await supabase.from("profiles").select("username");

profiles is not an array.

do you mean:

const hostPath = profiles?.data.map()