我需要有关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
答案 0 :(得分：0)
这是因为您的内容架构allContentfulArt已将tags字段定义为字符串，并且默认情况下不能为空。它总是希望至少要填充一个contentfulArt才能填充结果。
理想的解决方案是customize your schema by adding a type definition
要暂时避开该问题，您可以做的一件简单的事情就是为tags字段添加一个值，或者在获取数据后添加一个空白值并对其进行修整。
答案 1 :(得分：0)
firestorePagingOptions.value = FirestorePagingOptions.Builder<Story>()
.setQuery(factsQuery, Source.DEFAULT, config) {
val story = it.toObject(Story::class.java)!!
//Modify your data here
story //return the modified object
}.build()
的实例。在Contentful构建内容模型时，目前需要记住一些事情。
- 目前，不会在GraphQL模式中创建没有至少一个填充实例的字段。
- 使用参考字段时，请注意，此源插件将自动创建反向参考。您无需在两种内容类型上都创建引用。
这是您的错误消息试图与此消息一起传达的内容：
您希望有选择地使用字段“标签”，而现在在任何地方都没有使用它。因此，Gatsby无法推断类型并将其添加到GraphQL模式。一种快速解决方案是在该字段中添加至少一个条目（“虚拟内容”）。如果要使用可选字段，建议显式键入GraphQL模式。这样，您不必添加提到的“虚拟内容”。请访问我们的文档，以了解如何定义“ ContentfulArt”的架构
tags可用。如果您使用预览API拉动开发中的草稿，则可能没有发布在Contentful中设置了tags的内容。当您部署到生产环境并从非预览版API中提取时，草稿内容将不可用。
最后，确认您拥有configured your environment variables in Netlify来包含您的内容访问令牌。