时间戳

首页 > 解决方案 > 如何将前端添加到 qraphQL？

graphql - 如何将前端添加到 qraphQL？

问题描述

我正在学习 Gatsby.js 并面临一个问题。我试图从 Markdown 中获取一个 html 文档，但首先我需要阅读 markdown 文档的 frontmatter。所以，我下载了 gatsby-transformer-remark，将其添加到 gatsby-config.js。但是当我打开 localhost:8000/__graphql 并尝试获取 frontmatter 时，没有这样的选项。

这是我使用的查询：

{
    allMarkdownRemark{
        nodes{
            frontmatter{
               title
            }
        }
    }
}

它在“frontmatter”一词下划线并写下“无法查询类型“MarkdownRemark”的字段frontmatter”。我究竟做错了什么？这就是它在 graphql 中的样子：image

盖茨比-config.js

module.exports = {
  siteMetadata: {
    title: `Gatsby Default Starter`,
    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
    author: `@gatsbyjs`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`, 
      },
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        commonmark: true,
        footnotes: true,
        pedantic: true,
        gfm: true,
        name: 'md-files',
        path: '${__dirname}/src/pages/md-files',
      },
    },
  ],
}

降价文件

---
title: "first post"
date: 2019-11-12
---

# this is a header

Lorem ipsum...

似乎graphql根本看不到任何降价文档。

标签： graphqlgatsby

解决方案

解决了。源文件系统位于图像文件夹中gatsby-config.js，因此 qraphql 没有看到所有降价文件。我换了gatsby-source-filesystem。这是一个代码：

{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `pages`,
    path: `${__dirname}/src/pages`,
  },
},

pages文件夹包含 md 文件
（感谢 EliteRaceElephant 的帮助）

推荐阅读