Reactjs 无法查询字段"；x"；“关于类型”；“是”；_Reactjs_Graphql_Gatsby_Netlify_Contentful

Reactjs 无法查询字段"；x"；“关于类型”；“是”；

reactjs graphql gatsby

Reactjs 无法查询字段"；x"；“关于类型”；“是”；,reactjs,graphql,gatsby,netlify,contentful,Reactjs,Graphql,Gatsby,Netlify,Contentful,我需要一些关于Graphql查询的帮助：）。我试图将portfolio网站部署到Netlify，在部署过程中，我遇到了这个错误。我的代码在本地主机上工作，但在Netlify上不工作。我需要从Contentful中提取数据并用它填充图像库预期结果： Netlify部署我的代码我得到的结果是：生成错误 There was an error in your GraphQL query: 2:51:25 AM: Cannot query field "tags" on t

我需要一些关于Graphql查询的帮助：）。我试图将portfolio网站部署到Netlify，在部署过程中，我遇到了这个错误。我的代码在本地主机上工作，但在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

从“React”导入React
从“盖茨比”导入{graphql}
从“反应介质图像缩放”导入缩放
从“../components/Footer”导入页脚
从“../components/Header”导入标题
从“../components/Head”导入头部
导入'react medium image zoom/dist/styles.css'
从“../components/Pagination”导入分页
从“../pages/portfolio.module.scss”导入portfolioStyles
常量GalleryList=（{pageContext，data}）=>{
常量{currentPage，numPages}=pageContext
常量isFirst=currentPage==1
常量isLast=currentPage==numPages
/*如果prev page等于currentpage-1，则返回第一页，否则返回第1页*/
const prevPage=currentPage-1==1？`/portfolio/${1}`:`/portfolio/${currentPage-1}`
/*下一页=当前页+1*/
const nextPage=`/portfolio/${currentPage+1}`
/*这将返回一个包含conain gallery页面的div容器
我们通过不同的预定义常量和变量传递数据
*/
返回(
{/*包含菜单和分页的标头容器*/}
{/*这是一个分页组件，使用传递的道具来管理分页*/}
{/*这是一个从Graphql查询接收数据的gallery div容器*/}
{
data.allContentfulArt.edges.map（（edge）=>{
返回(
//我们使用Graphql查询从Contenful API获取数据
//缩放允许我们单击缩放从Contenftul API传递下来的图像
{edge.node.title}
{edge.node.tags}
{edge.node.publishedDate}
)
})
}
{/*这是一个包含页脚组件的页脚容器*/}
)
}
/*这是一个graphql查询，用于从一个有内容的API获取代码*/
export const pageQuery=graphql`
查询（$skip:Int！，$limit:Int！）{
allContentfulArt（跳过：$skip，限制：$limit）{
边缘{
节点{
标题
标签
publishedDate（格式字符串：“MMMM Do，YYYY”）
形象{
文件{
网址
}
}
}  
}
}
}`
导出默认GalleryList

这是因为您的内容模式

allContentfulArt

已将

标记

字段定义为字符串，并且默认情况下不能为空。它总是希望填充一个结果，至少一个

contentfulArt

理想的解决办法是

临时绕过此问题的一个简单方法是为

标记

字段添加一个值，或者在提取数据后添加一个空白值并在之前对其进行修剪。

首先，确保数据中有一个

标记

的实例。 :

目前，在Contentful上构建内容模型时，需要记住一些事情

目前，不会在GraphQL模式中创建至少没有一个已填充实例的字段

使用引用字段时，请注意此源插件将自动创建反向引用。您不需要在这两种内容类型上创建引用

这就是您的错误消息试图通过此消息传达的内容：

您希望有选择地使用字段“标记”，但现在它不在任何地方使用。因此，盖茨比无法推断类型并将其添加到GraphQL模式。一个快速修复方法是在该字段中添加至少一个条目（“虚拟内容”）。如果要使用可选字段，建议显式键入GraphQL模式。这样，您就不必添加提到的“虚拟内容”。访问我们的文档，了解如何定义“ContentfulArt”的模式

其次，确保

标签可用。
如果您正在使用preview API在开发中提取草稿，那么您可能没有发布在Contentful中设置了标记的内容。当您部署到生产环境并从非预览API中提取时，您的草稿内容将不可用
最后，确认您必须包括您的内容访问令牌。
您好，Ferran，我试图添加架构，但仍然收到相同的错误：（我找不到任何关于虚拟内容的信息，我也不明白为什么它在本地主机上运行时却不能在网站上运行：（你在Netlify中添加了你的环境变量，前缀是GATSBY_u
？只是尝试在Netlify上的环境变量中添加GATSBY_u前缀。相同的交易：）我通过将allContentfulArt更改为AllContentFulAssets解决了这个问题。我尝试添加架构，但仍然出现相同的错误。：（我找不到关于虚拟内容的任何信息，我不明白为什么它在本地主机上运行时在网站上不起作用：（我不知道你什么意思，你什么也找不到。我将文档的相关部分和错误复制到了我的答案中。只需阅读我的答案并遵循它。我通过将allContentfulArt更改为AllcontentfulAssets@AlexVoznesenski我百分之百肯定t