无法访问 Gatsby 页面查询中的对象数据

Posted

技术标签:

【中文标题】无法访问 Gatsby 页面查询中的对象数据【英文标题】:Cannot access object data in Gatsby page query 【发布时间】:2019-06-22 05:11:15 【问题描述】:

我在网站上使用 Prismic 和 Gatsby,但在使用页面模板时遇到了问题。 graphql 查询有效,但我无法访问数据对象中的项目。

我的模板是这样设置的:

const ContactPage = ( data: prismicContactPage ) => 
  const  data  = prismicContactPage;
  console.log(prismicContactPage); // logs the object and all its data
  console.log(data); // undefined

  return (
    <Layout>
      <SEO key="contact-seo" title="" />
      <PageBody>
          data.title.text // data is undefined
          prismicContactPage.data.title.text // prismicContactPage.data is undefined
      </PageBody>
    </Layout>
  );
;

export default ContactPage;

export const pageQuery = graphql`
  query ContactQuery 
    prismicContactPage 
      data 
        title 
          text
        
      
    
  
`;

我可以记录查询对象,并且所有正确的信息都存在,但无论出于何种原因,我都无法访问对象中的数据。

如果我将组件更改为:

const ContactPage = ( data: prismicContactPage: data ) => 
  console.log(data); // logs correct info

  return (
    <Layout>
      <SEO key="contact-seo" title="" />
      <PageBody>
          data.title.text // undefined
      </PageBody>
    </Layout>
  );
;

我可以“进一步”进入对象,但使用 data.title.text 最终会得到 TypeError: data.title is undefined

删除缓存和重建查询似乎没有帮助,当我使用 graphql 资源管理器时,我的 graphql 查询没有问题。我希望我遗漏了一些基本的东西,但我无法终生找出问题所在。

【问题讨论】:

【参考方案1】:

有了这个查询

export const pageQuery = graphql`
  query ContactQuery 
    prismicContactPage 
      data 
        title 
          text
        
      
    
  
`;

我希望数据像这样传递到我的组件中:

props.data.prismicContactPage.data.title.text

所以也许您打算像这样提取数据?

// extract props.data.prismicContactPage
const ContactPage = ( data:  prismicContactPage  ) => 
  console.log(prismicContactPage.data.title.text)
  return ...

// extract props.data.prismicContactPage.data
const ContactPage = ( data:  prismicContactPage:  data   ) => 
  console.log(data.title.text)
  return ...


当你写( data: prismicContactPage ) =&gt; ...时,就相当于

const prismicContactPage = this.props.data`;
const  data  = prismicContactPage; // undefined because there's no this.props.data.data

( data: prismicContactPage: data ) =&gt; ... 等价于

const data = this.props.data.prismicContactPage;
console.log(data.title.text) // undefined because there's no this.props.data.prismicContactPage.title.text

我认为两者都不是您期望的data

【讨论】:

谢谢德里克! data: prismicContactPage 这是修复,缺少额外的花括号。 很高兴它有帮助!解构语法有时真的很难阅读

以上是关于无法访问 Gatsby 页面查询中的对象数据的主要内容,如果未能解决你的问题,请参考以下文章

无法从内容查询数据到 gatsby 项目

Gatsby 和 GraphQL:访问模板页面中的数据

无法在 allMarkdownRemark graphql 上查询字段

错误:无法使用来自另一个模块或领域的 GraphQLObjectType“__Directive”

Gatsby - GraphQL - StaticQuery 标签 - 由于查询字符串的奇怪行为,站点无法编译

GraphQL 中的复杂查询变量(通过 Gatsby)