并非所有 graphql 查询数据都在 GatsbyJS 页面上呈现
Posted
技术标签:
【中文标题】并非所有 graphql 查询数据都在 GatsbyJS 页面上呈现【英文标题】:Not all graphql query data being rendered on GatsbyJS page 【发布时间】:2020-02-17 16:11:15 【问题描述】:我正在使用 Gatsby 和 Strapi 无头 CMS 构建一个博客网站,并且我正在使用 GraphQL 查询文章以显示在索引页面上。
每篇文章都与 Strapi 中的一个类别类型相关。 文章和类别在 Strapi 中都是独立的内容类型,并通过关系字段链接。
我可以在 GraphiQL 中查询所有需要的数据,并且所有数据都返回没有错误。
但是,在 Gatsby 中实现查询时,除了“类别/名称”字段之外的所有字段都将被返回。 下面是当前在索引页中使用的代码。
const IndexPage = ( data ) => (
<Layout>
<ul>
data.allStrapiArticle.edges.map(document => (
<li key=document.node.id>
<Link to=`/$document.node.id`>
<Img fixed=document.node.image.childImageSharp.fixed/>
<p>
document.node.categories.name
</p>
<h2>
document.node.title
</h2>
<p>by document.node.author.username
</p>
<p>
document.node.content
</p>
</Link>
</li>
))
</ul>
</Layout>
)
export default IndexPage
export const pageQuery = graphql`
query IndexQuery
allStrapiArticle
edges
node
id
image
childImageSharp
fixed(width: 200, height: 125)
...GatsbyImageSharpFixed
author
username
title
content
categories
name
`
This is the GraphQL result from the query 编辑---为了清楚起见,我在 GraphQL 中添加了查询结果的屏幕截图。
在浏览器中渲染页面后,控制台中未显示任何错误,并且 html 元素已渲染但仍为空。
有人可以看看我来自 Gatsby 的索引页代码,并告诉我这个特定数据文件丢失的位置吗?
【问题讨论】:
【参考方案1】:数据不会丢失,您只是没有正确访问它们。仅使用 document 访问数据,不要使用 document.node
data.allStrapiArticle.edges.map(document => (
<li key=document.id>
<Link to=`/$document.id`>
<Img fixed=document.image.childImageSharp.fixed/>
<p>
document.categories.name
</p>
<h2>
document.title
</h2>
<p>by document.author.username
</p>
<p>
document.content
</p>
</Link>
</li>
))
【讨论】:
感谢 nir99 的提示!但这确实会引发一个错误,指出“类别未定义”我添加了 GraphiQL 查询的屏幕截图以防万一。再次感谢。 嘿@AnthonyNixon 你的类别是一个数组,所以你不能通过 document.categories.name 访问它,所以你需要通过document.categories[0].name
访问它的第一个元素或者如果有多个元素你应该遍历那些,希望这能解决问题,顺便说一下屏幕截图
谢谢@nir99,这成功了,我还没有意识到类别字段是一个数组。在这种情况下工作的代码是:document.node.categories[0].name以上是关于并非所有 graphql 查询数据都在 GatsbyJS 页面上呈现的主要内容,如果未能解决你的问题,请参考以下文章
带有熊猫数据框输入的 sklearn 分类报告产生:“TypeError:并非所有参数都在字符串格式化期间转换”
MySQL 和 Python:并非所有参数都在 SQL 语句中使用