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

Posted 2023-03-08

【中文标题】无法从内容查询数据到 gatsby 项目

【英文标题】：Can't query data from contentful to gatsby project

【发布时间】：2021-07-06 00:10:50

【问题描述】：

不要让查询内容满足工作。 收到错误信息： TypeError: Cannot read property 'allContentfulMagArticle' of undefined

data在 Posts 组件中未定义。看不到我在这里做错了什么。

import  graphql  from 'gatsby';
import Post from "./post.js";
import './posts.css';

export const query = graphql`
    query 
    allContentfulMagArticle
        edges
            node
                index
                title
                name
                subHeading
                extract 
                    raw
                    
                slug
                
            
        
    
`
const Posts = ( data ) => 
    return (
        <section className="posts">
            <ul className="post-list">
                data.allContentfulMagArticle.edges.map(( node ) => (
                    <Post
                        key=node.index
                        id=node.index
                        node=node
                        title=node.title
                        name=node.name
                        // image=node.frontmatter.featuredImage.childImageSharp.fluid
                        subheading=node.subheading
                        body=node.extract.raw
                    />
                ))
            </ul>
        </section>
    )

export default Posts

这是我的 gatsby-config.js：

require('dotenv').config(
  path: `.env`,
)

module.exports = 
  siteMetadata: 
    title: `XX`,
    description: `XX`,
    author: `Lisa Lee`,
    url: `https://www.tortmagazine.com`
  ,
  plugins: [
    `gatsby-plugin-react-helmet`,
    'gatsby-plugin-fontawesome-css',
    'gatsby-plugin-sharp',
    `gatsby-transformer-sharp`,
    `gatsby-transformer-remark`,
    
      resolve: `gatsby-source-filesystem`,
      options: 
        path: `$__dirname/src/`,
      ,
    ,
    
      resolve: `gatsby-source-contentful`,
      options: 
        spaceId: process.env.GATSBY_CONTENTFUL_SPACE_ID,
        accessToken: process.env.GATSBY_CONTENTFUL_ACCESS_TOKEN,
      ,
    ,
  ],

【问题讨论】：

嗯，问题显然来自 Contentful 插件。您是否正确获取了环境变量？您是否尝试过在 localhost:8000/___graphql 操场上进行查询以检查其构造是否良好？

是的，它适用于localhost:8000/___graphql。 @FerranBuireu

【参考方案1】：

您使用“组件”一词来描述您的Posts，但您使用的查询仅适用于页面或 createPage 的上下文中（在模板文件中也是如此）。如果您确实在一个组件中，那将是问题所在。如果不是，那么我不清楚出了什么问题，我使用相同的模式（例如：data.edges.node.map()）并且它适用于我。

我注意到的唯一其他区别是gatsby-config，我定义了一个environment 键。我不确定如果没有定义行为是什么，可能默认为master，因此您可能还想确认您处于正确的环境中。

【讨论】：

是的，我实际上刚刚意识到这是问题所在（我更仔细地阅读了错误日志^_^）该查询在非页面上下文中不起作用，我需要它用于 Posts 组件。所以我改用了 useStaticQuery，它现在可以工作了。 @米歇尔