由于我的 GraphQL 查询中的错误,构建失败
Posted
技术标签:
【中文标题】由于我的 GraphQL 查询中的错误,构建失败【英文标题】:Build fail due to error in my GraphQL query 【发布时间】:2020-08-19 22:28:06 【问题描述】:字段“category”不是MarkdownRemarkFrontmatterFilterInput类型定义的。什么意思,请指教。
我使用 Netlify CMS 作为 Gatsbyjs 前端的内容管理器。我正在使用这个入门模板https://github.com/netlify-templates/gatsby-starter-netlify-cms 他们显示标签的方式我想类似地显示类别所以我复制了它的标签相关文件并将标签替换为类别集合,还在 config.yml 文件中添加了类别集合。下面是那个代码。 构建错误 https://prnt.sc/sb6pwd 错误在 index.js 文件中。
category.js 这是我列出所有类别和该类别总博客数的模板文件
import React from 'react'
import Helmet from 'react-helmet'
import Link, graphql from 'gatsby'
import Layout from '../components/Layout'
class CategoryRoute extends React.Component
render()
const posts = this.props.data.allMarkdownRemark.edges
const postLinks = posts.map((post) => (
<li key=post.node.fields.slug>
<Link to=post.node.fields.slug>
<h2 className="is-size-2">post.node.frontmatter.title</h2>
</Link>
</li>
))
const category = this.props.pageContext.category
const title = this.props.data.site.siteMetadata.title
const totalCount = this.props.data.allMarkdownRemark.totalCount
const categoryHeader = `$totalCount post$
totalCount === 1 ? '' : 's'
tagged with “$category”`
return (
<Layout>
<section className="section">
<Helmet title=`$category | $title` />
<div className="container content">
<div className="columns">
<div
className="column is-10 is-offset-1"
style= marginBottom: '6rem'
>
<h3 className="title is-size-4 is-bold-light">categoryHeader</h3>
<ul className="taglist">postLinks</ul>
<p>
<Link to="/category/">Browse all category</Link>
</p>
</div>
</div>
</div>
</section>
</Layout>
)
export default CategoryRoute
export const categoryPageQuery = graphql`
query CategoryPage($category: String)
site
siteMetadata
title
allMarkdownRemark(
limit: 1000
sort: fields: [frontmatter___date], order: DESC
filter: frontmatter: category: in: [$category]
)
totalCount
edges
node
fields
slug
frontmatter
title
`
index.js
import React from 'react'
import kebabCase from 'lodash'
import Helmet from 'react-helmet'
import Link, graphql from 'gatsby'
import Layout from '../../components/Layout'
const CategoryPage = (
data:
allMarkdownRemark: group ,
site:
siteMetadata: title ,
,
,
) => (
<Layout>
<section className="section">
<Helmet title=`Category | $title` />
<div className="container content">
<div className="columns">
<div
className="column is-10 is-offset-1"
style= marginBottom: '6rem'
>
<h1 className="title is-size-2 is-bold-light">Categories</h1>
<ul className="taglist">
group.map((category) => (
<li key=category.fieldValue>
<Link to=`/category/$kebabCase(category.fieldValue)/`>
category.fieldValue (category.totalCount)
</Link>
</li>
))
</ul>
</div>
</div>
</div>
</section>
</Layout>
)
export default CategoryPage
export const categoryPageQuery = graphql`
query CategoryQuery
site
siteMetadata
title
allMarkdownRemark(limit: 1000)
group(field: frontmatter___category)
fieldValue
totalCount
`
Config.yml 分类集合声明:
- name: category
label: Category
identifier_field: slug
folder: src/pages/blog/category
create: true
fields:
-label: Template Key
name: templateKey
widget: hidden
default: category
- label: Category
name: category
widget: string
- label: Category Image
name: category_img
widget: image
- label: Slug
name: slug
widget: string
- name: blog
label: Blog
folder: src/pages/blog
create: true
slug: "year-month-day-slug"
fields:
- label: Template Key
name: templateKey
widget: hidden
default: blog-post
- label: Title
name: title
widget: string
- label: Path
name: path
widget: hidden
default: blog-post
- label: Publish Date
name: date
widget: datetime
- label: Description
name: description
widget: text
- label: Featured Post
name: featuredpost
widget: boolean
- label: Featured Image
name: featuredimage
widget: image
- label: Body
name: body
widget: markdown
- label: Tags
name: tags
widget: list
- label: Category
name: category
widget: select
options:
- label: Iraq
value: iraq
- label: Personal
value: personal
- label: Productivity
value: productivity
- label: Software Development
value: software-development
- label: Uncategorized
value: uncategorized
【问题讨论】:
任何人都可以帮助我,我真的被困住了。 【参考方案1】:您需要为此字段添加一些初始数据。如果您查看控制台,您可能会看到这样的内容:
您希望有选择地使用您的字段,但现在它没有在任何地方使用。因此盖茨比无法推断类型并将其添加到 GraphQL 架构。一个快速的解决方法是添加至少一个条目 字段(“虚拟内容”)
【讨论】:
以上是关于由于我的 GraphQL 查询中的错误,构建失败的主要内容,如果未能解决你的问题,请参考以下文章
在 Mutation 中使用 GraphQL Args 属性
尝试从反应应用程序连接到 graphcool 中继 API 时出现此错误:模块构建失败:错误:没有有效的 GraphQL 端点