reactjs - “查询”类型的字段“markdownRemark”上的未知参数“字段”
问题描述
我在进入 graghql 游乐场时遇到了访问fields
财产的麻烦markdownRemark
,我找不到fields
gatsby-node.js
const path = require(`path`)
const { createFilePath } = require(`gatsby-source-filesystem`);
exports.onCreate = ({ node, getNode, actions }) => {
const { createNodeField } = actions
if (node.internal.type === `MarkdownRemark`) {
const slug = createFilePath({ node, getNode })
createNodeField({
node,
name: `slug`,
value: slug
})
}
}
exports.createPage = ({ graphql, actions }) => {
const { createPage } = actions
return grapgh(`
allMarkdownRemark {
edges {
node {
fields {
slug
}
}
}
}
`).then(result => {
result.data.allMarkdownRemark.edges.forEach(({node}) => {
createPage({
path: node.fields.slug,
component: path.resolve(`./src/templates/blog-post.js`),
context: node.fields.slug
})
})
})
}
gatsby-config.js
module.exports = {
siteMetadata: {
title: `OB blog`,
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`,
},
resolve: `gatsby-source-filesystem`,
options: {
name: `markdowns`,
path: `${__dirname}/src/markdown-pages`,
}
},
`gatsby-transformer-remark`,
`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`, // This path is relative to the root of the site.
},
},
// this (optional) plugin enables Progressive Web App + Offline functionality
// To learn more, visit: https://gatsby.dev/offline
// `gatsby-plugin-offline`,
],
}
解决方案
你应该使用:
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,
})
}
}
请注意,您正在使用onCreate
而不是onCreateNode
API。有关Gatsby 节点 API的更多信息。从文档中:
创建新节点时调用。希望扩展或转换由其他插件创建的节点的插件应实现此 API。另请参阅
createNode
和的文档createNodeField
。
推荐阅读
- sql-server - 带 varchar(max) 的 NOLOCK 提示
- c# - 发布到 Asp.Net Core 收到空对象
- ios - Firebase FCM 关于 IOS 10 的说明
- python - 边框出现在图像内而不是图像周围
- ruby-on-rails - 在单个搜索列中同时搜索两列
- neo4j - 找不到方法:带有 neo4j 插件和 gremlin 服务器的 DefaultGraphTraversal.to
- json - 在 Golang 中初始化和插入嵌套的 JSON 数据?
- c# - C#/Powershell 发送组合键
- angular - 从 web api 获取数据时获取结果对象为 undifine。仅在第一次通话中
- spring-boot - Spring Boot WebFlux Kotlin 找不到路由