GraphQL query filtering with Strapi V4 and Gatbsy

Question

Since Strapi changed to its never V4 structure it has broken my V3 query which I was using to create pages based on the data returned from Strapi.

The code in my Gatsby-node.js file using the createPages feature is like so:

const path = require(`path`)

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions

  const result = await graphql(`
    {
      allStrapiArticles {
        edges {
          node {
            data {
              id
              attributes {
                title
              }
            }
          }
        }
      }
    }
  `)

  result.data.allStrapiArticles.edges[0].node.data.forEach(article => {
    createPage({
      path: `/blog/${article.attributes.title.replace(" ", "_")}`,
      component: path.resolve(`src/templates/blog/index.js`),
      context: {
        id: article.id,
      },
    })
  })
}

Then in the page template I use the following query where I reference the id passed in as context:

export const query = graphql`
  query ($id: String!) {
    strapiArticles(id: { eq: $id }) {
      data {
        id
        attributes {
          title
          author
          body
        }
      }
    }
  }

This seems to return a value of undefined however.

Is anyone familiar with how this query must be altered to conform to Strapi's new structure?

Basically I am trying to access the title, author, and body attributes based upon the object id passed in as context from Gatsby-node.js

Answer 1

There's no version available/compatible for Strapi v4 plugin (gatsby-source-strapi) yet, as you can see in the repository:

⚠️ This version of gatsby-source-strapi is only compatible with Strapi v3 at the moment. We are currently working on a v4 compatible version.

That said, in the meantime, your only chance is to roll back to v3 and wait for a compatible plugin version (if that's an option).