Gatsby FileSystem routing and linking

[joernroeder]

I am playing around with gatsbys filesystem routing and my dato sources but I run into issues using the gatsbyPath https://www.gatsbyjs.com/docs/reference/routing/file-system-route-api/#routing-and-linking graphql resolver.

My dato model BlogArticle contains a title and a slug, and detail pages are rendered via the fs API successfully.

// /src/pages/blog/{BlogArticle.slug}.js

import React from 'react'
import { graphql } from "gatsby"

export default function BlogArticle({ data }) {
  return (
    <pre>
      {JSON.stringify(data, null, 2)}
    </Box>
  )
}

export const query = graphql`
  query($id: String!) {
    datoCmsBlogArticle(id: { eq: $id }) {
      title
      slug
    }
  }
`

which resolves the slugs correctly and renders a page per article — so far so good.

I was then about to set up the collection page, and modified the example from their docs.

// /src/pages/blog/index.js

import React from "react"
import { Link, graphql } from "gatsby"

export default function HomePage(props) {
  return (
    <ul>
      {props.data.allBlogArticle.map(blogArticle => (
        <li key={blogArticle.title}>
          <Link to={blogArticle.blogPath}>{blogArticle.title}</Link> 
        </li>
      ))}
    </ul>
  )
}

export const query = graphql`
  query {
    allBlogArticle {
      title
      blogPath: gatsbyPath(filePath: "/blog/{BlogArticle.slug}")
    }
  }
`

The issue I am facing is that "/blog/{BlogArticle.slug}" does not get resolved in the query :(

After digging a bit deeper I realized that the graphql resolver uses https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-page-creator/src/derive-path.ts to derive the path — but, and that is different then the nodes before — receives a dato node which still has all their data at node.entityPayload.attributes and hence _.get(node, key) can't pick up the given key (in this case slug) from the node.

I'd love to use gatsbys filesystem routing in the future but until this is resolved I don't see a way how that would be possible.

[pieh]

@joernroeder This seems like "duplicate" of https://github.com/gatsbyjs/gatsby/issues/37103 which we just recently merged resolution for (yesterday). For now the fix is available in gatsby@5.3.0-next.2 (and later), but will be hitting latest in few days - can you give it a try using newest gatsby@next?

[joernroeder]

@pieh thanks for the reply. I'll give it a shot next week and report back.