NextJS 13 App-Directiory / result is not iterable

Help
,
1

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

2

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

3

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

4

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

5

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

6

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?

7

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

8

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!