无法查询字段“x"在类型“y"上 [英] Cannot query field "x" on type "y"

查看：20
本文介绍了无法查询字段“x"在类型“y"上的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

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

您的 GraphQL 查询中出现错误:2:51:25 AM:无法查询字段标签"在ContentfulArt"类型上.2:51:25 AM:如果你不期待标签"存在于ContentfulArt"类型上这很可能是一个错字.但是，如果您期望标签"要存在，有几种常见问题的解决方案:2:51:25 AM:-如果您添加了新数据源和/或更改了 gatsby-node.js/gatsby-config.js 中的某些内容，请尝试重新启动您的开发服务器2:51:25 AM:- 该字段可能在另一个子字段中可访问，请尝试在 GraphiQL 中查询并使用 GraphiQL 资源管理器查看您可以查询哪些字段以及它们具有什么形状2:51:25 AM: - 您想选择性地使用您的字段标签"现在它没有在任何地方使用.因此 Gatsby 无法推断类型并将其添加到 GraphQL 模式中.一种快速解决方法是添加至少一个包含该字段的条目(虚拟内容")2:51:25 AM:如果您想使用可选字段，建议明确键入您的 GraphQL 架构.这样您就不必添加提到的虚拟内容".访问我们的文档以了解如何为ContentfulArt"定义架构:https://www.gatsbyjs.org/docs/schema-customization/#creating-type-definitions

Gatsby-node.js 文件

在此处输入代码const path = require('path')module.exports.createPages = async ({graphql, actions}) =>{const { createPage } = 动作const 投资组合模板 = path.resolve('./src/templates/gallerylist.js')const { 数据 } = 等待 graphql(`询问{所有内容艺术{边{节点{标题标签发布日期(格式字符串:MMMM 做，YYYY")图片{文件{网址}}}}}}`)//错误处理//每页图像数量 = 8const imgPerPage = 8const numPages = Math.ceil(data.allContentfulArt.edges.length/imgPerPage)//我们通过edges.length从查询中的对象总数计算数学上限，然后将其除以8.//我们为Numpages中的每个索引创建页面，忽略带有_,"的回调，路径=我们将创建页面的路径//component - 包含我们创建页面代码端点的模板//context - 传递到创建页面的信息Array.from({length:numPages}).forEach((_, i) => {动作.createPage({路径:我 === 0 ?`/portfolio/${1}`:`/portfolio/${i + 1}`，组件:投资组合模板，语境: {限制:imgPerPage，跳过:我 * imgPerPage，数页，当前页面:i + 1}})})}

我的模板文件

从 'react' 导入 React从盖茨比"导入 {graphql}从'react-medium-image-zoom'导入缩放从'../components/footer'导入页脚从'../components/header'导入标题从'../components/head'导入头导入'react-medium-image-zoom/dist/styles.css'从'../components/pagination'导入分页从'../pages/portfolio.module.scss'导入投资组合样式const GalleryList = ({ pageContext, data}) =>{const {currentPage, numPages} = pageContextconst isFirst = currentPage === 1const isLast = currentPage === numPages/*如果prev page等于currentpage -1，我们返回返回第一页，否则我们向下一页*/const prevPage = currentPage - 1 === 1 ?`/portfolio/${1}` : `/portfolio/${currentPage - 1}`/*下一页=当前页+1*/const nextPage = `/portfolio/${currentPage + 1}`/* 这将返回一个包含画廊页面的 div 容器我们通过不同的预定义常量和变量传递数据*/返回 (<div className={portfolioStyles.maincontainergallery}><标题=画廊"/><div className={portfolioStyles.headercomponent}><标题/>{/* 包含菜单和分页的标题容器 */}<div className={portfolioStyles.portfoliopagepaginationcontainer}>{/* 这是分页组件，带有向下传递的道具来管理分页 */}<分页isFirst={isFirst}isLast={isLast}上一页={上一页}nextPage={nextPage}/>

{/* 这是一个图库 div 容器，它接收来自 Graphql 查询的数据*/}<div className={portfolioStyles.portfoliopagegallerycontainer}><div className={portfolioStyles.portfoliopagegallery}>{data.allContentfulArt.edges.map((edge) => {返回 (//我们使用Graphql查询从Contenful API中获取数据//Zoom 允许我们点击缩放从 Contenftul API 传递过来的图像<figure className={portfolioStyles.portfoliopagegalleryfigure} ><h3><图说明>{edge.node.title}</figcaption><p>{edge.node.tags}</p><p>{edge.node.publishedDate}</p><缩放><img src={edge.node.image.file.url} 宽度=250"；alt={edge.node.title}/></缩放></图>)})}

{/* 这是一个带有页脚组件的页脚容器 */}<div className={portfolioStyles.portfoliopagefootercontainer}><页脚/>

)}/* 这是用于从 Contentful API 中获取代码的 graphql 查询 */导出 const pageQuery = graphql`查询($skip:Int！，$limit:Int！){allContentfulArt(跳过:$skip，限制:$limit){边{节点{标题标签发布日期(格式字符串:MMMM 做，YYYY")图片{文件{网址}}}}}}`导出默认图库列表

解决方案

首先，确保你的数据中有一个 tags 的实例.

来自文档:

<块引用>

目前在 Contentful 构建内容模型时需要牢记一些注意事项.

  1. 目前，不会在 GraphQL 架构中创建没有至少一个填充实例的字段.
  2. 使用引用字段时，请注意此源插件将自动创建反向引用.您不需要对这两种内容类型都创建引用.

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

<块引用>

您想选择性地使用您的字段标签"；现在它没有在任何地方使用.因此 Gatsby 无法推断类型并将其添加到 GraphQL 模式中.快速修复是添加至少一个具有该字段的条目(虚拟内容").如果您想使用可选字段，建议显式键入您的 GraphQL 架构.这样您就不必添加提到的虚拟内容".访问我们的文档，了解如何为ContentfulArt"定义架构

其次，确保标签可用.

如果您在开发中使用预览 API 来提取草稿，那么您可能尚未发布在 Contentful 中设置了 tags 的内容.当您部署到生产环境并从非预览 API 中提取时，您的草稿内容将不可用.

最后，确认您已经在 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.

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 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
      }
    })
  })

}

My template file

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

解决方案

First, make sure you have an instance of tags in your data.

From the documentation:

There are currently some things to keep in mind when building your content models at Contentful.

  1. At the moment, fields that do not have at least one populated instance will not be created in the GraphQL schema.
  2. When using reference fields, be aware that this source plugin will automatically create the reverse reference. You do not need to create references on both content types.

This is what your error message was trying to convey with this message:

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"

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.

Finally, confirm that you have configured your environment variables in Netlify to include your Contentful access token.

这篇关于无法查询字段“x"在类型“y"上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆