title: Gatsby React + Strapi: TypeError: result.data.allStrapiArticles.forEach is not a function
body: <p>I recently upgraded to the Strapi's new v4 only to find that the new way in which it was returning data was breaking my Gatsby app.</p>
  <p>The new structure includes nested arrays within the data, and I am having trouble using this with Gatsby's createPages feature.</p>
  <p>Here is the working query from http://localhost:8000/___graphql</p>
  <pre><code>query MyQuery {
    allStrapiArticles {
      edges {
        node {
          data {
            attributes {
              title
              author
              content
            }
            id
          }
        }
      }
    }
  }
  
  </code></pre>
  <p>And here is what gets returned by that query (note each item and its relevant data now being in the arrays):</p>
  <pre><code>{
    &quot;data&quot;: {
      &quot;allStrapiArticles&quot;: {
        &quot;edges&quot;: [
          {
            &quot;node&quot;: {
              &quot;data&quot;: [
                {
                  &quot;attributes&quot;: {
                    &quot;title&quot;: &quot;Test Title&quot;,
                    &quot;author&quot;: &quot;Test Author&quot;,
                    &quot;content&quot;: &quot;Test Content&quot;
                  },
                  &quot;id&quot;: 1
                }
              ]
            }
          }
        ]
      }
    },
  }
  </code></pre>
  <p>The code exporter from http://localhost:8000/___graphql suggests the code block below to use with their createPages feature, however using it returns the following error :</p>
  <blockquote>
  <p>TypeError: result.data.allStrapiArticles.forEach is not a function</p>
  </blockquote>
  <pre><code>const path = require(`path`)
  
  exports.createPages = async ({ graphql, actions }) =&gt; {
    const { createPage } = actions
  
    const result = await graphql(`
      {
        allStrapiArticles {
          edges {
            node {
              data {
                attributes {
                  title
                  author
                  content
                }
                id
              }
            }
          }
        }
      }
    `)
    const templatePath = path.resolve(`PATH/TO/TEMPLATE.js`)
    
    result.data.allStrapiJobs.forEach((node) =&gt; {
      createPage({
        path: `/careers/${node.id}`,
        component: path.resolve(`src/templates/article/index.js`),
        context: {
          slug: node.id,
        },
      })
    })
  }
  </code></pre>
  <p>For reference, prior to upgrading to Strapi V4 my code block within gatsby-node.js using the createPages feature was as follows (note the data was returned without arrays and was far easier to work with):</p>
  <pre><code>exports.createPages = async ({ graphql, actions }) =&gt; {
    const path = require(`path`)
    const { createPage } = actions
  
    return new Promise((resolve, reject) =&gt; {
      graphql(`
        query {
          allStrapiArticles {
            edges {
              node {
                id
              }
            }
          }
        }
      `).then(result =&gt; {
        result.data.allStrapiArticles.edges.forEach(({ node }) =&gt; {
          createPage({
            path: `/articles/${node.id}`,
            component: path.resolve(`src/templates/article/index.js`),
            context: {
              id: node.id,
            },
          })
        })
        resolve()
      })
    }).catch(error =&gt; {
      console.log(error)
      reject()
    })
  }
  
  const path = require(`path`)
  const makeRequest = (graphql, request) =&gt;
    new Promise((resolve, reject) =&gt; {
      // Query for nodes to use in creating pages.
      resolve(
        graphql(request).then(result =&gt; {
          if (result.errors) {
            reject(result.errors)
          }
          return result
        })
      )
    })
  </code></pre>
  <p>Does anyone more knowledgeable than I know how to get this working again? It has been a source of quite a lot of frustration. Any help would be greatly appreciated!</p>