NextJS 13 App-Directiory / result is not iterable

Hey there!
I’m building a nextJS app and wanted to use Apollo to fetch some data. But unfortunately it doesn’t work as expected. The output is always the same : “typeError” - result is not iterable.

In the backend, the data comes in. So in the terminal all the data is logged. But on the frontend I get this error (image attached).

In my “apolloClient.js” i use this code:

import { ApolloClient, InMemoryCache } from '@apollo/client'

const client = new ApolloClient({
   uri: 'https://eu-central-1-shared-euc1-02.cdn.hygraph.com/.../master',
   cache: new InMemoryCache(),
})

export default client

and at the place where I want to fetch the data, I use the following:

import client from '@/lib/apolloClient'
import { gql } from '@apollo/client'

export async function generateStaticParams() {
   const { data } = await client.query({
      query: gql`
         query {
            zimmers {
               slug
               thumbnail {
                  url
               }
               zimmertyp
               beschreibung
               ausstattung
               preis
               detailimages {
                  url
               }
            }
         }
      `,
   })

   console.log(data)

   return {
      slug: [
         { slug: `${data.slug}` },
         { slug: `${data.slug}` },
         { slug: `${data.slug}` },
      ],
   }
}

export default function Page({ params }) {
   const { slug } = params

   return <h1>Hello!</h1>
}

Idk where the culprit is hiding… hopefully somebody of you knows!
Thanks @ all in advance :heart_hands:
Bildschirmfoto 2023-06-02 um 18.17.24|690x343

Hi @iamsebastn :wave: is your Page component using slug anywhere? Right now your sample code only shows some placeholder Hello text.

Hey! yep, I already used this instead of the “Hello” text. But still got the same error…

Are you saying that the error message appears even without using slug anywhere in the Page component?

Exactly. As soon as I try to fetch the data with Apollo this error occurred.
When I use dummy data like this https://jsonplaceholder.typicode.com/ it work‘s just fine…

First I thought it‘s because I have an error in the gql query. But I’m Hygraph, the query works and on the backend all the data is also logged in the terminal

What is the difference between the placeholder data and the data you’re fetching? Can you share snippets of what works and what doesn’t?

The placeholder-data is just json API.
Here‘s the code that works for the

export async function generateStaticParams() {
  const posts = await fetch(„https://jsonplaceholder.typicode.com/todos“).then((res) => res.json());
 
  return posts.map((post) => ({
    slug: post.title,
  }));
}

export default function Page({ params }) {
  const { slug } = params;
  return (
      <div>
         {params.map((post) => {
            return <h1 key={post.id}>{post.title}</h1>
         })}
      </div>
   )
}

Inside of the „generateStaticParams“ I also tried to map over the GQL data from the example provided first, but I still get the same error

Thanks @iamsebastn - I’m noticing a difference that might be relevant here.

In the first snippet you provided, the return value of generateStaticParams was:

That’s an object with one key slug, the value for which is an array of objects. Whereas in the working example, the return value is just an array of objects:

With the caveat that I don’t know much about Next.js, I’ll speculate that if you modify the first snippet to be an array of objects rather than nesting that array inside a POJO, you should see that error disappear. Hopefully that helps!