由于我的 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 查询中的错误,构建失败的主要内容,如果未能解决你的问题,请参考以下文章

Apollo 中深度本地状态的 Graphql 查询失败

Apollo GraphQL 连接失败

在 Mutation 中使用 GraphQL Args 属性

尝试从反应应用程序连接到 graphcool 中继 API 时出现此错误:模块构建失败:错误:没有有效的 GraphQL 端点

使用 mpicxx 时由于 _noalias 导致 OpenMPI 构建失败

如何防止我的 Vue 构建由于 Typescript 错误而失败