Prior to V4 I was using the following code within my gatsby-node.js file:
Original gatsby-node.js File
exports.createPages = async ({ graphql, actions }) => {
const path = require(`path`)
const { createPage } = actions
return new Promise((resolve, reject) => {
graphql(`
query {
allStrapiArticles {
edges {
node {
id
}
}
}
}
`).then(result => {
result.data.allStrapiArticles.edges.forEach(({ node }) => {
createPage({
path: `/blog/${node.id}`,
component: path.resolve(`src/templates/article/index.js`),
context: {
id: node.id,
},
})
})
resolve()
})
}).catch(error => {
console.log(error)
reject()
})
}
const path = require(`path`)
const makeRequest = (graphql, request) =>
new Promise((resolve, reject) => {
// Query for nodes to use in creating pages.
resolve(
graphql(request).then(result => {
if (result.errors) {
reject(result.errors)
}
return result
})
)
})
Since upgrading to Strapi V4 (v4.0.3 to be specific) the new data structures have broken my Gatsby app. I am aware that there has been a change to this structure and I am not here to debate whether it is a good/bad decision, I just want to get my application running again 
So with that being said, the new working query taken from http://localhost:8000/___graphql is as follows:
Working V4 Query
query {
allStrapiArticles {
edges {
node {
data {
id
attributes {
author
title
content
}
}
}
}
}
}
Where it gets confusing is after observing my console logs this query returns data in the following structure:
V4 Query Data
allStrapiArticles:
edges: Array(1)
0:
node:
data: Array(1)
0:
attributes:
author: "Test Author"
title: "Test Title"
content: "Test Content"
The way that the data is returned in a nested array has broken the earlier code. Could someone assist me with adjusting the initial gatsby-node.js code to work with this new structure?
Any help would be very much appreciated!
System Information
- 4.0.3:
- Mac OS Monterey:
- Postgres:
- 6.14.8:
- NPM Version:
- 1.22.17: