При запросе GraphQL в MDX возвращается TypeError props.data ... unifned

Question

Используя Gatsby JS, я пытаюсь запросить frontmatter моего поста в блоге (MDX) с GraphQL на моем hompage, который также является файлом MDX.

Я следую Руководство Гэтсби о том, как это сделать, но я продолжаю получать сообщение об ошибке «Ошибка типа: props.data.allMdx.edges.node не определена»

Страница, к которой я хочу обратиться по адресу «scr / pages / index.mdx»

import { graphql } from "gatsby"
import Container from "../components/container"
import Cards from "../components/cards"

export const pageQuery = graphql`
  query IndexPageQuery {
    allMdx(filter: {fileAbsolutePath: {regex: "content/posts/"}}) {
      edges {
        node {
          id
          frontmatter {
            title
          }
        }
      }
    }
  }
`

## Recent Posts

<Container>
  {props.data.allMdx.edges.node.frontmatter.map(node => (
    <Cards>
      <h3>{node.title}</h3>
    </Cards>
  ))}
</Container>

Мой gatsby-config. js file:

const remarkPlugins = [require("remark-slug")]

const website = require("./config/website")

const pathPrefix = website.pathPrefix === "/" ? "" : website.pathPrefix

module.exports = {
  pathPrefix: website.pathPrefix,
  siteMetadata: {
    siteUrl: website.url + pathPrefix,
    pathPrefix,
    title: website.title,
    titleAlt: website.titleAlt,
    description: website.description,
    banner: website.logo,
    headline: website.headline,
    siteLanguage: website.siteLanguage,
    ogLanguage: website.ogLanguage,
    author: website.author,
    facebook: website.facebook,
    twitter: website.twitter,
  },
  plugins: [
    "gatsby-plugin-react-helmet",
    "gatsby-plugin-catch-links",
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: "content",
        path: `${__dirname}/content/`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: "posts",
        path: `${__dirname}/content/posts/`,
      },
    },
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        extensions: [".mdx", ".md"],
        remarkPlugins,
        options: {
          gatsbyRemarkPlugins: [
            {
              resolve: `gatsby-remark-images`,
              options: {
                maxWidth: 1200,
              },
            },
          ],
        },
      },
    },
  ],
}

Что я здесь не так делаю? Я что-то упустил?

Answer 1

Ура! Я понял, что я делаю не так. По сути, я понял, что GraphQL требователен, когда вы запрашиваете какие данные. Я получил правильный порядок и разделил компонент на использование-post-list. js хук для вызова GraphQL и post-list. js компонент для отображения запроса.

хук в use-post-list. js:

import { useStaticQuery, graphql } from "gatsby"
export const usePostQuery = () => {
  const { allMdx } = useStaticQuery(
    graphql`
      query PostQuery {
        allMdx(filter: { fileAbsolutePath: { regex: "/content/posts/" } }) {
          edges {
            node {
              frontmatter {
                title
              }
            }
          }
        }
      }
    `
  )
  return allMdx
}

С помощью ловушки мне ТОЛЬКО нужно вернуть allMdx. Расширение его до «return allMdx.edges» дало мне ошибку «undefined».

И пост-список. js компонент:

import React from "react"
import { usePostQuery } from "../hooks/use-posts-hook"

const PostList = () => {
  const allMdx = usePostQuery()

  return (
    <div>
      {allMdx.edges.map(postData => (
        <h1>{postData.node.frontmatter.title}</h1>
      ))}
    </div>
  )
}

export default PostList

Здесь я должен был поставить "края" "перед функцией .map и" node "после .map и внутри элемента, который я хочу запросить.

Теперь я могу отобразить компонент PostList в файле MDX, который чертовски хорош!

Попка простая, как эта:

import { jsx, ThemeProvider } from "theme-ui"
import PostList from "../components/post-list"

# Recent Posts
<PostList />

Answer 2

Честно говоря, я раньше не использовал Гэтсби JS. Но я думаю, что ваша функция карты вызывается до того, как данные поступят. Вы можете добавить следующее дополнительное условие, чтобы увидеть, помогает ли это. В основном ошибка типа произошла из-за отсутствия данных.

<Container>
  {props.data &&
    props.data.allMdx && 
    props.data.allMdx.edges && 
    props.data.allMdx.edges.node.frontmatter.map(node => (
    <Cards>
      <h3>{node.title}</h3>
    </Cards>
  ))}
</Container>

Это поможет проверить, поступают ли данные или нет.