Javascript 为什么graphql不将我的数据注入react组件中？

我用这个来创建一个盖茨比博客，它将使用降价页面

我正在尝试创建一个“post repeater”组件，该组件将循环遍历我的所有帖子，并使用frontmatter创建指向它们的链接，如下所示

---
path: "/blog/my-first-post"
date: "2019-05-04"
title: "My first blog post"
---

import React from "react"

import "../styles/post-repeater.scss"
import { graphql, Link } from "gatsby"

export default function PostRepeater({postQuery}){
    console.log('my data:',postQuery);
    return(

        <>
            {postQuery.map(instance => 
                <div className="post">
                    <h2>{instance.title}</h2>
                    <span className="datePosted">{instance.date}</span>
                    <span className="readTime"></span>
                    <p></p>
                    <Link to={instance.path}>Read More</Link>
                    <hr />
                </div>
            )}
        </>

    )
}

export const postQuery = graphql`
query MyQuery {
    allMarkdownRemark {
      edges {
        node {
          frontmatter {
            path
            title
            date
          }
        }
      }
    }
  }
`

我有一个正确提取数据的graphQl查询

我的组件看起来像这样

---
path: "/blog/my-first-post"
date: "2019-05-04"
title: "My first blog post"
---

import React from "react"

import "../styles/post-repeater.scss"
import { graphql, Link } from "gatsby"

export default function PostRepeater({postQuery}){
    console.log('my data:',postQuery);
    return(

        <>
            {postQuery.map(instance => 
                <div className="post">
                    <h2>{instance.title}</h2>
                    <span className="datePosted">{instance.date}</span>
                    <span className="readTime"></span>
                    <p></p>
                    <Link to={instance.path}>Read More</Link>
                    <hr />
                </div>
            )}
        </>

    )
}

export const postQuery = graphql`
query MyQuery {
    allMarkdownRemark {
      edges {
        node {
          frontmatter {
            path
            title
            date
          }
        }
      }
    }
  }
`

从“React”导入React
导入“./style/post repeater.scss”
从“盖茨比”导入{graphql，Link}
导出默认函数PostRepeater（{postQuery}）{
log（'my data:'，postQuery）；
返回(
{postQuery.map（实例=>
{instance.title}
{instance.date}

阅读更多

)}
)
}
export const postQuery=graphql`
查询我的查询{
所有的标记{
边缘{
节点{
前沿物质{
路径
标题
日期
}
}
}
}
}
`

如果我将postQuery的console.log放在PostRepeater组件中，它会返回为未定义。因此，尽管我遵循了上面教程中的相同布局，但组件似乎从未获得数据

如果我放置一个

console.log（'data'，postQuery）从组件外部，我在控制台中获得以下内容

数据2575425095

我做错了什么
 在进行查询之后，
gatsby
将其作为与查询匹配的对象注入

在本例中，正如您在
GraphiQL
中所看到的，您将获得一个具有初始键
data
的对象

{
  "data": {
    "allMarkdownRemark": {
      "edges": [
        {
          "node": {
            "frontmatter": {
              "title": "...",
              "date": ...
            }
          }
        }
      ]
    }
  }
}

您试图做的是一个不存在的键
postQuery

此外，您仍然可以将其作为从
export const postQuery

export const postQuery = graphql`
  query MyQuery {
    allMarkdownRemark {
      edges {
        node {
          frontmatter {
            path
            title
            date
          }
        }
      }
    }
  }
`;

//       v  Logs the query id
console.log('my data:', postQuery);

//                                               v Is not defined
export default function PostRepeater({ data, postQuery }) {

  //                       v Shadowing the outter value of postQuery
  console.log('my data:', postQuery);

  // The query injected as "data" object
  console.log('my data:', data);

  return (
    <>
      //      v Be aware of which object you query, edges is an array
      {data.allMarkdownRemark.edges.map(...)}
    </>
  );
}

export const postQuery=graphql`
查询我的查询{
所有的标记{
边缘{
节点{
前沿物质{
路径
标题
日期
}
}
}
}
}
`;
//v记录查询id
log（'my data:'，postQuery）；
//v没有定义
导出默认函数PostRepeater（{data，postQuery}）{
//v隐藏postQuery的outter值
log（'my data:'，postQuery）；
//作为“数据”对象注入的查询
log（'我的数据：'，数据）；
返回(
//注意你查询的对象，边是一个数组
{data.allmarkdownmark.edges.map（…）}
);
}
自动附加到道具的graphql查询的导出仅适用于页面组件。对于任何非页面组件，您需要使用StaticQuery组件或useStaticQuery挂钩

请在此处阅读更多信息：

下面是使用useStaticQuery钩子时代码的外观

import React from "react"

import "../styles/post-repeater.scss"
import { graphql, useStaticQuery, Link } from "gatsby"

export default function PostRepeater() {
  const data = useStaticQuery(graphql`
    query MyQuery {
      allMarkdownRemark {
        edges {
          node {
            frontmatter {
              path
              title
              date
            }
          }
        }
      }
    }
    `)
   // you might have multiple nodes in which case you must use filter 
   // or find to get node which contains your data. 
   const postQuery = data.allMarkdownRemark.edges[0].node.frontmatter;

   return (
     <>
       {postQuery.map(instance => 
         <div className="post">
           <h2>{instance.title}</h2>
           <span className="datePosted">{instance.date}</span>
           <span className="readTime"></span>
           <p></p>
           <Link to={instance.path}>Read More</Link>
           <hr />
         </div>
       )}
     </>
   )

}

从“React”导入React
导入“./style/post repeater.scss”
从“盖茨比”导入{graphql，useStaticQuery，Link}
导出默认函数PostRepeater（）{
常量数据=useStaticQuery（graphql`
查询我的查询{
所有的标记{
边缘{
节点{
前沿物质{
路径
标题
日期
}
}
}
}
}
`)
//您可能有多个节点，在这种情况下必须使用筛选器
//或者查找以获取包含数据的节点。
const postQuery=data.allMarkdownRemark.edges[0].node.frontmatter；
返回(
{postQuery.map（实例=>
{instance.title}
{instance.date}

阅读更多

)}
)
}
try StaticQuery尝试制作一个可生产的示例，这里有一个盖茨比模板：我将其上传到netlify。我试图创建一个最小的可复制示例，但我无法让allMarkdownRemark插件在codesandbox上工作。这里的网址无论如何。这是netlify实例的URL，我希望这会有所帮助。我不知道为什么，但PostRepeater组件内的两个日志都返回为未定义，而组件外的日志显示的ID与您上面所写的相同。答案中解释了这一点，您不了解哪一部分？还取决于您的结构，页面查询和静态查询之间存在差异，请确保您按照文档进行操作，因为我只需要进一步阅读文档。但是我把你的答案复制粘贴到我的组件中，结果它不起作用。PostRepeater组件中的两个控制台日志返回为未定义。