在 MDX 中查询 GraphQL 会返回 TypeError props.data.. undifned

Question

使用GatsbyJS，我正在尝试在我的主页上使用GraphQL查询我的博客文章的前言(MDX(，这是一个MDX文件。

我正在遵循盖茨比的指南来了解如何执行此操作，但我不断收到错误"类型错误：props.data.allMdx.edges.node is undefined">

我想在"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>

我的盖茨比配置.js文件：

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 在查询哪些数据时很挑剔。我得到了正确的顺序，并将组件拆分为一个用于调用 GraphQL 的 use-post-list.js 钩子和用于映射查询的 post-list.js 组件。

使用后列表.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
}

使用钩子，我只需要返回所有Mdx。将其扩展到"返回所有Mdx.edges"给了我"未定义"错误。

和后列表.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 函数之前放置"边缘"，在 .map 之后和我要查询的项目中放置"节点"。

现在，我可以在MDX文件中渲染PostList组件，这真是太棒了！

屁股简单如下：

import { jsx, ThemeProvider } from "theme-ui"
import PostList from "../components/post-list"
# Recent Posts
<PostList />

Answer 2

坦率地说，我以前没有使用过GatsbyJS。但是，我认为您的地图函数在数据到来之前就被调用了。您可以添加以下附加条件以查看是否有帮助。大多数情况下，类型错误是由于没有数据而发生的。

<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>

这将有助于检查数据是否来。