无法从Gatsby项目中的GraphQL访问MDX文件

Question

我正在遵循一个tutorial，用Gatsby从头开始建立一个博客。

当我试图访问graphQL上的MDX文件时，我卡住了。我不确定我做错了什么。

下面是我的GraphQL的样子：My GraphQL, no allMDX

graphQL应该是什么样子：Tutorial's GraphQL

和我的gatsby-config代码：

module.exports = {
siteMetadata: {
  title: `Gatsby Crash Course`,
  author: {
    name: `James`,
    summary: `The Youtuber you are watching`,
  },
  description: `A simple Crash course .`,
  siteUrl: `http://localhost:8000/`,
  social: {
    twitter: `james_r_perkins`,
  },
},
plugins: [
  {
    resolve: `gatsby-plugin-mdx`,
    options: {
      extensions: [`.mdx`, `.md`],
    },
  },
  {
    resolve: `gatsby-source-filesystem`,
    options: {
      path: `${__dirname}/blog`,
      name: `blog`,
    },
  },
  `gatsby-plugin-sharp`,
  `gatsby-remark-images`,
  {
    resolve: `gatsby-plugin-mdx`,
    options: {
      gatsbyRemarkPlugins: [
        {
          resolve: `gatsby-remark-images`,
          options: {
            maxWidth: 1200,
          },
        },
      ],
    },
  },
],

}；

Answer 1

您有两个可能导致配置冲突的gatsby-plugin-mdx实例。像这样使用它：

module.exports = {
siteMetadata: {
  title: `Gatsby Crash Course`,
  author: {
    name: `James`,
    summary: `The Youtuber you are watching`,
  },
  description: `A simple Crash course .`,
  siteUrl: `http://localhost:8000/`,
  social: {
    twitter: `james_r_perkins`,
  },
},
plugins: [
  {
    resolve: `gatsby-source-filesystem`,
    options: {
      path: `${__dirname}/blog`,
      name: `blog`,
    },
  },
  `gatsby-plugin-sharp`,
  `gatsby-remark-images`,
  {
    resolve: `gatsby-plugin-mdx`,
    options: {
      extensions: [`.mdx`, `.md`],
      gatsbyRemarkPlugins: [
        {
          resolve: `gatsby-remark-images`,
          options: {
            maxWidth: 1200,
          },
        },
      ],
    },
  },
],
};

假设您的gatsby-source-filesystem设置正确( .mdx文件位于/blog上)，现在您应该能够看到GraphQL节点。之前运行过一个gatsby clean。