无法查询字段"x".在类型"y"上 [英] Cannot query field "x" on type "y"
问题描述
我需要有关Graphql查询的帮助:).我试图将产品组合网站部署到Netlify，并且在部署过程中出现此错误.我的代码在localhost上工作，但在Netlify上不工作.我需要从Contentful中提取数据并用它填充图片库.
I need some help with a Graphql query :). I'm trying to deploy the portfolio website to the Netlify and during deploy, I get this error. My code working on localhost but not on a Netlify. I need to pull data from the Contentful and populate image gallery with it.
预期结果:Netlify部署我的代码
Expected result: Netlify deploy my code
我得到的结果是:构建错误.
The result I got: Build error.
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文件
Gatsby-node.js file
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
推荐答案
首先，确保数据中有 tags 的实例.
摘自文档:
在Contentful构建内容模型时，目前需要记住一些事情.
There are currently some things to keep in mind when building your content models at Contentful.
- 目前，不会在GraphQL模式中创建没有至少一个填充实例的字段.
- 使用参考字段时，请注意，此源插件将自动创建反向参考.您无需在两种内容类型上都创建引用.
这是您的错误消息试图与此消息一起传达的内容:
This is what your error message was trying to convey with this message:
您想选择使用字段标签"现在，它没有在任何地方使用.因此，Gatsby无法推断类型并将其添加到GraphQL模式.一种快速解决方案是在该字段中添加至少一个条目(虚拟内容").如果要使用可选字段，建议显式键入GraphQL模式.这样，您不必添加提到的虚拟内容".请访问我们的文档，以了解如何定义"ContentfulArt"的架构
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"). 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"
第二，确保标记可用.
如果您使用预览API拉动开发中的草稿，则可能没有发布在Contentful中设置了 tags 的内容.当您部署到生产环境并从非预览版API中提取时，您的草稿内容将不可用.
Second, make sure that tags are available.
If you are using the preview API to pull drafts in development, it's plausible that you haven't published the content that has tags set in Contentful. When you deploy to production and pull from the non-preview API, your draft content wouldn't be available.
最后，确认您已经在Netlify中配置了环境变量包括您的内容访问令牌.
Finally, confirm that you have configured your environment variables in Netlify to include your Contentful access token.
这篇关于无法查询字段"x".在类型"y"上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
