3

我有一个定义了 frontmatter 的 mdx gatsby 页面。

---
title: About Me
path: /about
description: Some information about me.
---

# About Me
[Twitter](https://twitter.com/RainFire336)

我在以下配置了默认布局gatsby-config.js：

{
  resolve: 'gatsby-plugin-mdx',
  options: {
    defaultLayouts: {
      default: require.resolve("./src/components/page-layout.tsx")
    },
    gatsbyRemarkPlugins: [
      'gatsby-remark-images',
      {
        resolve: 'gatsby-remark-prismjs',
        options: {
          showLineNumbers: true,
          prompt: {
            user: 'rain',
          },
        },
      },
    ],
  },
}

布局尝试使用它的 props 访问 frontmatter：

import React from 'react';
import { Layout } from './layout';
import { Card } from './card';
import { Metadata } from './metadata';

interface Props {
  children: React.ReactNode;
  uri: string;
  pageContext: { frontmatter: any };
}

export default function (p: Props) {
  const { children, uri, pageContext } = p;
  return (
    <Layout>
      <Metadata {...pageContext.frontmatter} url={uri} />
      <Card style={{ width: '50%' }}>{children}</Card>
    </Layout>
  );
}

问题是 frontmatter 总是一个空对象： 带有空frontmatter对象的调试器 所以要形成一个问题。如何访问我的 frontmatter？

4

3 回答 3

0

有完全相同的问题。重新运行gatsby develop对我不起作用。

什么有效：

每当我在前端添加新的键/值时，我都需要.cache在重新运行之前删除 Gatsby 应用程序根目录下的文件夹gatsby develop。pageContext.frontmatter然后我就可以通过我的布局访问正确的前端。

还值得注意的是，frontmatter 应该在 MDX 文件中的任何导入之前进行。像这样：

---
foo: 'bar'
---

import './something.js'

# My great MDX

TLDR：

删除.cacheGatsby 项目根目录中的文件夹。

于 2021-02-15T17:43:11.063 回答
0

我也遇到了这个问题。我必须重新运行gatsby develop才能让 frontmatter 出现在我的pageContext.

我还发现，当我更新我的 frontmatter 时，它不会自动更新，我需要重新启动gatsby develop命令才能显示它。

于 2020-11-02T17:05:28.853 回答
-1

如果没有最低限度的可重现示例，局外人就不可能调试您的代码。

调试 GraphQL 的最佳方法是使用浏览器的 GraphiQL 界面。

将填充pageContext了数据的 graphQL 查询粘贴到 GraphiQL 编辑器的查询窗口中http://localhost:8000/___graphql。

前端是否包含数据？

  • 如果不是，您的 GraphQL 查询有问题，或者您的数据无法查询。
  • 如果是这样，您很可能在传递数据或解构数据时犯了错误。用于console.log(pageContext)检查数据对象。
于 2020-05-09T08:55:43.330 回答