reactjs - GraphQL 查询只显示原始结果

我有一个 GraphQL 查询在某种程度上可以工作（React、Gatsby、Typescript）。但是我只能让浏览器显示原始的 JSON 数据（“stringify”的东西是正确可见的，原始 JSON）。

每当我尝试使用数据绑定时，我在浏览器中会收到错误消息 “TypeError: undefined is not an object (evaluating 'ProjectTitles.edges.node')”。但在控制台中没有出现这个问题。这可能是什么原因？这是代码：

    import { graphql, useStaticQuery } from "gatsby";
    import React, { Fragment } from "react";

    const ProjectList = () => {
      const ProjectTitles = useStaticQuery(graphql`
        {
          allMarkdownRemark(sort: { fields: frontmatter___title }) {
            edges {
              node {
                frontmatter {
                  title
                }
              }
            }
          }
        }
      `);
      return (
        <Fragment>
          <h2>Project titles</h2>
          <div>{ProjectTitles.edges.node.frontmatter.title}</div>
          {/* <div>{ProjectTitles.allMarkdownRemark.edges.node.frontmatter.title}</div> */}
          {/* <div>{ProjectTitles}</div> */}
          <pre>{JSON.stringify(ProjectTitles, null, 2)}</pre>
        </Fragment>
      );
    };

    export default ProjectList;

答案＃1

由于 edges 很可能是一个数组，你需要访问某个特定项或映射整个数组，例如。

{ProjectTitles.edges.map(node => (
    <div>{node.frontmatter.title}</div>
))}