Tutorial Part 6 - Blog page prop returns undefined from allMdx after moving index.js into blog folder

[nickburczyk]

I am following the tutorial for my first Gatsby site and have run into a problem. I had no problem creating the dynamic blog post page. But as soon as I moved blog.js into the blog folder and renamed to index.js, the page renders fine, but the data prop in the new src/blog/index.js file returns undefined. Running the query in the GraphiQL browser does return the correct data.

{
  "data": {
    "allMdx": {
      "nodes": [
        {
          "frontmatter": {
            "title": "Building custom hooks",
            "date": "2 days ago"
          },
          "id": "9a5bb4bd-a5c4-5447-95e8-9404e6cc0212"
        },
        {
          "frontmatter": {
            "title": "Imposter syndrome doesn't (have to) exist",
            "date": "a month ago"
          },
          "id": "30e5bbcb-158d-5753-926a-e0b096d749f0"
        },
        {
          "frontmatter": {
            "title": "My First Blog Post",
            "date": "2 months ago"
          },
          "id": "e40b4742-af96-5844-845b-04df059720b5"
        }
      ]
    }
  },
  "extensions": {}
}

Attempted solutions

• gatsby clean && gatsby develop in the terminal. Interestingly, there are no terminal errors in the running development server
• adding optional chaining throughout the component like this const posts = data?.allMdx?.nodes - This works to render the page but there are no posts

• adding "query" as the default value of data const BlogPage = ({ data = query }) => {

File Structure

src/blog/index.js code

import * as React from 'react'
import Layout from '../../components/Layout/layout'
import { graphql } from 'gatsby'
import Seo from '../../components/seo'

const BlogPage = ({ data }) => {
  console.log('data', data);
  const posts = data.allMdx.nodes

  return (
    <Layout pageTitle="My Blog Posts">
      {posts?.map(post => (
        <article>
          <h4 key={post.id}>
            {post?.frontmatter?.title} - &nbsp;
            {post?.frontmatter?.date}
          </h4>
          <p>
            {post?.excerpt}
          </p>
        </article>
      ))}
    </Layout>
  )
}

const query = graphql`
  query GetBlogPosts {
    allMdx (sort: {frontmatter: {date: DESC}}) {
      nodes {
        frontmatter {
          title
          date(fromNow: true)
        }
        id
        excerpt
      }
    }
  }
`

export const Head = () => <Seo title="My Blog Posts" />

export default BlogPage

Screenshot of browser error

Screenshot of perfectly happy terminal

[nickburczyk]

Only thing I have done that works (but it is a suboptimal workaround) is to use useStaticQuery inside the page component to get the data, and that works.

const BlogPage = () => {
  const data = useStaticQuery(graphql`
    query {
      allMdx {
        nodes {
          frontmatter {
            title
            date(fromNow: true)
          }
          id
          excerpt
        }
      }
    }
  `)
  const posts = data?.allMdx?.nodes
  console.log('posts', posts);
  return (
    <Layout pageTitle="My Blog Posts">
     // ... more jsx return
    </Layout>
  )
}

[violy]

Hi Nick,

How do you create/register your blog index page ? With File System route API or with Node API / createPage API ?

And then, why do you want to move your file outside the /src/pages directory ? to change the URL of your blog ?
To do this, you have multiples options :

• if your blog archive list path is /blog/ and is static, the simplest way is to move your file as /src/pages/blog.js. If you have already a /src/pages/blog/ subdirectory, I think you can also use /src/pages/blog/index.js.
• if your path is dynamic, you can use the File System route API, or the Node API with createPage.

Arthur.

[nickburczyk]

As I am really new to Gatsby, I am not sure what the tutorial uses, but it looks more like the File System Route API. Here is what the relevant parts of the file structure look like:

root
  | src
    | pages
      | 404.jsx
      | about.jsx
      | index.jsx    // site home page
      | blog
        | {mdx.frontmatter__slug}.jsx
        | index.js.    // blog page at localhost:8000/blog/

According to the tutorial, this should work just fine. My issue is the following:

• IF I leave the blog page as root/src/pages/blog.js, the page query works fine and passes { data } prop to page component just fine.
• IF I move it into the blog directory (as above), the page query no longer works and { data } is undefined.

My workaround if I want it as the index file in the blog directory is to do a normal GQL query inside of the blog page instead of passing it as page data props. Here is what that looks like:

import * as React from 'react'
import Layout from '../../components/Layout/layout'
import { graphql, useStaticQuery, Link } from 'gatsby'
import Seo from '../../components/seo'

const BlogPage = () => {
  const data = useStaticQuery(graphql`
    query {
      allMdx(sort: { frontmatter: { date: DESC }}) {
        nodes {
          frontmatter {
            title
            date(fromNow: true)
            slug
          }
          id
          excerpt
        }
      }
    }
  `)
  const posts = data?.allMdx?.nodes

  return (
    <Layout pageTitle="My Blog Posts">
      {posts?.map(post => (
        <article>
          <h2>
            <Link to={`/blog/${post.frontmatter.slug}`}>
              {post.frontmatter.title}
            </Link>
          </h2>
          <p>
            {post?.excerpt}
          </p>
        </article>
      ))}
    </Layout>
  )
}

// TODO: Make this query work as a page query
// const query = graphql`
//   query {
//     allMdx {
//       nodes {
//         frontmatter {
//           title
//           date(fromNow: true)
//         }
//         id
//         excerpt
//       }
//     }
//   }
// `

export const Head = () => 
  <Seo title="My Blog Posts" />

export default BlogPage

I could also leave it in the main pages directory where it was working, but that is not ideal for organization purposes (keeping all "blog stuff" together).