Цель

Привет. У меня есть веб-сайт Gatsby, и я использую gatsby-transformer-remark плагин для загрузки файлов уценки блога из каталога блога в GraphQL для отображения на моем сайте. Я просмотрел документы и пример кода, чтобы узнать, как создать slug для каждой страницы, чтобы в gatsby-node.js файле я мог динамически создавать страницы с slug.

Проблема

Когда я пытаюсь получить доступ к fields { slug } свойству в GraphiQL, я получаю следующую ошибку: message": "Cannot query field "fields" on type "MarkdownRemark"." я проверил свои настройки пару раз, и я думаю, что все кажется хорошим, поэтому я не уверен на 100%, что я пропустил, чтобы не иметь этих полей. Я могу получить доступ к другой информации, такой как необработанное содержимое файлов markdown и данные frontmatter, но не к полям.

Код

В моих gatsby-config.js плагинах у меня есть следующие настройки для исходной файловой системы и плагина remark

     {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `blog`,
        path: `${__dirname}/blog`,
      },
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 960,
            },
          },
          `gatsby-remark-prismjs`,
          `gatsby-remark-copy-linked-files`,
        ],
      },
    },
 

Как только я нахожусь в GraphiQL, я запускаю следующий запрос для репликации ошибки

 query {
  allMarkdownRemark(
          sort: { fields: [frontmatter___date], order: DESC }
          limit: 1000
        ) {
    edges {
      node {
        fields {
          slug
        }
        frontmatter {
          title
        }
      }
    }
  }
}

 

Как вы можете видеть, slug field не является дочерним элементом frontmatter (как должно быть изначально, если вы работаете с необработанными уценками). Чтобы сделать slug доступный как дочерний элемент field , вам необходимо добавить следующий фрагмент в свой gatsby-node.js :

 const { createFilePath } = require(`gatsby-source-filesystem`)

exports.onCreateNode = ({ node, getNode, actions }) => {
  const { createNodeField } = actions
  
  if (node.internal.type === `MarkdownRemark`) {
    const slug = createFilePath({ node, getNode, basePath: `pages` })
    createNodeField({
      node,
      name: `slug`,
      value: slug,
    })
  }
}
 

Добавляя эту конфигурацию с createNodeField помощью API, вы разрешаете Gatsby и предполагаемой схеме GraphQL создавать дополнительные поля на узлах, созданных другими плагинами, сообщая Gatsby, что если тип узла является markdown, создайте slug поле на основе slug значения frontmatter .

Дополнительную информацию вы можете найти в документах Gatsby’s docs.