个人中心
gpt4 book ai didi

reactjs - 无法查询类型 "x"上的字段 "y"

转载 作者：行者123 更新时间：2023-12-05 06:59:08 25 4
gpt4 key购买 nike

我需要一些有关 Graphql 查询的帮助 :)。我正在尝试将投资组合网站部署到 Netlify，但在部署期间出现此错误。我的代码在 localhost 上运行但不在 Netlify 上运行。我需要从 Contentful 中提取数据并用它填充图片库。

预期结果:Netlify 部署我的代码

我得到的结果:构建错误。

There was an error in your GraphQL query:
2:51:25 AM: Cannot query field "tags" on type "ContentfulArt".
2:51:25 AM: If you don't expect "tags" to exist on the type "ContentfulArt" it is most likely a typo.
However, if you expect "tags" to exist there are a couple of solutions to common problems:
2:51:25 AM: - If you added a new data source and/or changed something inside gatsby-node.js/gatsby-config.js, please try a restart of your development server
2:51:25 AM: - The field might be accessible in another subfield, please try your query in GraphiQL and use the GraphiQL explorer to see which fields you can query and what shape they have
2:51:25 AM: - You want to optionally use your field "tags" and right now it is not used anywhere. Therefore Gatsby can't infer the type and add it to the GraphQL schema. A quick fix is to add at least one entry with that field ("dummy content")
2:51:25 AM: It is recommended to explicitly type your GraphQL schema if you want to use optional fields. This way you don't have to add the mentioned "dummy content". Visit our docs to learn how you can define the schema for "ContentfulArt":
https://www.gatsbyjs.org/docs/schema-customization/#creating-type-definitions

Gatsby-node.js 文件

enter code here
 const path = require('path')

module.exports.createPages = async ({graphql, actions}) => {
  const { createPage } = actions
  const portfolioTemplate = path.resolve('./src/templates/gallerylist.js')
  const { data }  = await graphql(
    `
  query{
    allContentfulArt{
    edges{
      node{
        title
        tags
        publishedDate(formatString:"MMMM Do, YYYY")
        image{
          file{
              url
              }
          }
      }
    }
    }
}
`
)
//error handling


//amount of images per page = 8
  const imgPerPage = 8
  const numPages = Math.ceil(data.allContentfulArt.edges.length / imgPerPage)
//we calculate math ceiling from the total amount of objects in our query by edges.length then divide it by 8.

//we create page for each index in Numpages, ignoring the callback with "_,", path = path where we will create pages
//component - template that contain the endpoints for our create page code
//context - information to pass down into the created page
  Array.from({length:numPages}).forEach((_, i) => {
    actions.createPage({
      path: i === 0 ? `/portfolio/${1}` : `/portfolio/${i + 1}`,
      component:portfolioTemplate,
      context: {
        limit: imgPerPage,
        skip: i * imgPerPage,
        numPages,
        currentPage: i + 1
      }
    })
  })

}

我的模板文件

import React from 'react'
import {graphql} from 'gatsby'

import Zoom from 'react-medium-image-zoom'
import Footer from '../components/footer'
import Header from '../components/header'
import Head from '../components/head'
import 'react-medium-image-zoom/dist/styles.css'
import Pagination from '../components/pagination'

import portfolioStyles from '../pages/portfolio.module.scss'


const GalleryList = ({ pageContext, data}) => {
    const {currentPage, numPages} = pageContext
    const isFirst = currentPage === 1
    const isLast = currentPage === numPages
    /*if prev page equals to currentpage -1 we return return to the first page, otherwise we go down 1 page*/ 
    const prevPage = currentPage - 1 === 1 ? `/portfolio/${1}` : `/portfolio/${currentPage - 1}`
    /*next page = currentpage + 1*/ 
    const nextPage = `/portfolio/${currentPage + 1}`


/* this will return a div container that conain gallery page 
we are passing data via different predefined constants and variables
*/
    return (
        <div className={portfolioStyles.maincontainergallery}>
            <Head title="Gallery" />

            <div className={portfolioStyles.headercomponent}>
            <Header />
            {/* Header container that includes menu and a pagination */}
            <div className={portfolioStyles.portfoliopagepaginationcontainer}>
                {/* This is pagination component with passed down props to manage the pagination */}
        <Pagination 
        isFirst={isFirst}
        isLast={isLast}
        prevPage={prevPage}
        nextPage={nextPage}/>
            </div>
            </div>

            {/* This is a gallery div container that receives data from Graphql query*/}
        <div className={portfolioStyles.portfoliopagegallerycontainer}>
        <div className={portfolioStyles.portfoliopagegallery}>
            {
            data.allContentfulArt.edges.map((edge) => {
                return (
                //we grabbing data from Contenful API using Graphql query 
                //Zoom allows us to click-zoom the images passed down from Contenftul API
                <figure  className={portfolioStyles.portfoliopagegalleryfigure} >
                
                <h3 >
                <figcaption>
                {edge.node.title}
                </figcaption>
                </h3>

                <p>{edge.node.tags}</p>

                <p>{edge.node.publishedDate}</p>
                <Zoom>
                <img src={edge.node.image.file.url} width="250" alt={edge.node.title}/>
                </Zoom>
                
                </figure>
                
                    
                )
            })
        }
        </div>
        

        
        </div>

        
        {/* this is a footer container with a footer component */}
        <div className={portfolioStyles.portfoliopagefootercontainer}>
            <Footer />
            </div>
        </div>
    )
}
/* This is graphql query to grab the code from a Contentful API */
export const pageQuery = graphql`
query($skip: Int!, $limit: Int!){
    allContentfulArt(skip: $skip, limit: $limit){
        edges{
        node{
            title
            tags
            publishedDate(formatString:"MMMM Do, YYYY")
            image{
                file{
                    url
                    }
                }
            }  
        }
        }
}`

export default GalleryList

最佳答案

这是因为您的 Contentful 架构 allContentfulArt 已将 tags 字段定义为字符串，并且默认情况下不能为空。它总是期望一个结果被填充，至少对于一个 contentfulArt。

理想的解决方案是 customize your schema by adding a type definition

您可以暂时绕过该问题的一件简单的事情是为您的 tags 字段添加一个值，或者添加一个空白值并在获取数据之前对其进行修剪。

关于reactjs - 无法查询类型 "x"上的字段 "y"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64455525/

25 4 0
文章推荐： python - 为什么 patch.contains_point() 在检查点是否在多边形内时与 patch.get_path().contains_point() 的行为不同？
文章推荐： react-native - 在 React Native 中的数组或对象内部时，i18n 无法正确翻译
文章推荐： apache-spark - 无法使用 Apache Hudi 编写非分区表
文章推荐： python-3.x - python 中的 sys.exit 给出一个 SystemExit 错误 pystray
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com