Adjusting query filter with new V4 structure

Questions and Answers Frontend-Gatsby
1

I am building a web app which effectively follows the examples provided in the V3 tutorials for pulling Strapi data and creating dynamic pages with Gatsby. However with the new V4 data structure my filtering appears to be broken.

gatsby-node.js file:

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: `/careers/${article.attributes.title.replace(" ", "_")}`,
      component: path.resolve(`src/templates/blog/index.js`),
      context: {
        id: article.id,
      },
    })
  })
}

Template file query where I am trying to use the context from the gatsby-node.js file:

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

Trying to console log the data from this query yields an error of ‘undefined’ however.

This was previously working in V3 having followed the available (and now outdated) tutorials.

It seems that the ID is no longer returned as a string - what is the correct syntax to filter with the newer v4 changes?

System Information
  • 4.0.3:
  • Mac OS Monterey:
  • Postgres:
  • 14.15.0:
  • 6.14.8:
  • 1.22.17:
2

I see that the cause of the issue is the fact V4 is not yet compatible with gatsby-source-strapi

Bizarre that it was rushed out like this.