# NextJS 13 App-Directiory / result is not iterable

**URL:** <https://community.apollographql.com/t/nextjs-13-app-directiory-result-is-not-iterable/6330>\
**Category:** Server\
**Tags:** server, router\
**Created:** [June 2, 2023, 4:23pm UTC](https://community.apollographql.com/t/nextjs-13-app-directiory-result-is-not-iterable/6330 "2023-06-02T16:23:15Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![iamsebastn](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/iamsebastn/32/4333_2.png) [@iamsebastn](https://community.apollographql.com/u/iamsebastn)\
**Post date:** [June 2, 2023, 4:23pm UTC](https://community.apollographql.com/t/nextjs-13-app-directiory-result-is-not-iterable/6330/1 "2023-06-02T16:23:15Z")

</div>

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:

```auto
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:

```auto
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 🫶  
[Bildschirmfoto 2023-06-02 um 18.17.24|690x343](https://community.apollographql.com/uploads/short-url/4kOqI7Kntg61oxLAnDOZhbYi8lT.png)

---

<div class="post-metadata">

**Author:** ![JeffAuriemma](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/jeffauriemma/32/2845_2.png) [@JeffAuriemma](https://community.apollographql.com/u/JeffAuriemma)\
**Post date:** [June 2, 2023, 4:38pm UTC](https://community.apollographql.com/t/nextjs-13-app-directiory-result-is-not-iterable/6330/2 "2023-06-02T16:38:26Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![iamsebastn](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/iamsebastn/32/4333_2.png) [@iamsebastn](https://community.apollographql.com/u/iamsebastn)\
**Post date:** [June 2, 2023, 5:20pm UTC](https://community.apollographql.com/t/nextjs-13-app-directiory-result-is-not-iterable/6330/3 "2023-06-02T17:20:50Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![JeffAuriemma](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/jeffauriemma/32/2845_2.png) [@JeffAuriemma](https://community.apollographql.com/u/JeffAuriemma)\
**Post date:** [June 2, 2023, 6:38pm UTC](https://community.apollographql.com/t/nextjs-13-app-directiory-result-is-not-iterable/6330/4 "2023-06-02T18:38:54Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![iamsebastn](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/iamsebastn/32/4333_2.png) [@iamsebastn](https://community.apollographql.com/u/iamsebastn)\
**Post date:** [June 3, 2023, 3:55am UTC](https://community.apollographql.com/t/nextjs-13-app-directiory-result-is-not-iterable/6330/5 "2023-06-03T03:55:07Z")

</div>

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/](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

---

<div class="post-metadata">

**Author:** ![JeffAuriemma](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/jeffauriemma/32/2845_2.png) [@JeffAuriemma](https://community.apollographql.com/u/JeffAuriemma)\
**Post date:** [June 3, 2023, 12:55pm UTC](https://community.apollographql.com/t/nextjs-13-app-directiory-result-is-not-iterable/6330/6 "2023-06-03T12:55:17Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![iamsebastn](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/iamsebastn/32/4333_2.png) [@iamsebastn](https://community.apollographql.com/u/iamsebastn)\
**Post date:** [June 3, 2023, 4:15pm UTC](https://community.apollographql.com/t/nextjs-13-app-directiory-result-is-not-iterable/6330/7 "2023-06-03T16:15:54Z")

</div>

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

```auto
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

---

<div class="post-metadata">

**Author:** ![JeffAuriemma](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/jeffauriemma/32/2845_2.png) [@JeffAuriemma](https://community.apollographql.com/u/JeffAuriemma)\
**Post date:** [June 5, 2023, 1:24am UTC](https://community.apollographql.com/t/nextjs-13-app-directiory-result-is-not-iterable/6330/8 "2023-06-05T01:24:15Z")

</div>

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

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

> [@iamsebastn](#):
>
> ```auto
> {
> slug: [
> { slug: `${data.slug}` },
> { slug: `${data.slug}` },
> { slug: `${data.slug}` },
> ],
> }
> 
> ```

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:

> [@iamsebastn](#):
>
> ```auto
> posts.map((post) => ({
> slug: post.title,
> }));
> 
> ```

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!

---

<div class="post-metadata">

**Author:** ![Justin\_Gonzalez](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/justin_gonzalez/32/5359_2.png) [@Justin\_Gonzalez](https://community.apollographql.com/u/Justin_Gonzalez)\
**Post date:** [February 6, 2025, 8:48pm UTC](https://community.apollographql.com/t/nextjs-13-app-directiory-result-is-not-iterable/6330/9 "2025-02-06T20:48:44Z")

</div>