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).

CodePudding user response：

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()