Передняя панель Gatsby Mdx пуста - PullRequest
Новая
       57

Передняя панель Gatsby Mdx пуста

1 голос
/ 09 мая 2020

У меня есть страница mdx gatsby с определенным frontmatter. 

---
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',
          },
        },
      },
    ],
  },
}

Макет пытается получить доступ к frontmatter используя его props: 

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 всегда пустой объект: Debugger with empty frontmatter object Итак, чтобы сформировать вопрос. Как мне получить доступ к моему фронтматтеру?

1 Ответ

0 голосов
/ 09 мая 2020

Посторонний человек не может отладить ваш код без минимально воспроизводимого примера .

Лучший способ отладки GraphQL - использовать интерфейс GraphiQL вашего браузера.

Вставьте запрос graphQL, который заполняет pageContext данными, в окно запроса вашего редактора GraphiQL http://localhost:8000/___graphql.

Фронтматтер содержит данные?

  • Если нет, значит, что-то не так с вашим запросом GraphQL или ваши данные не могут быть запрошены.
  • Если это так, вы, скорее всего, ошиблись при передаче данных или деструктуризации Это. Используйте console.log(pageContext) для проверки объекта данных.
...