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

Question

我有一种工作的 GraphQL 查询(React、Gatsby、Typescript)。但我只让浏览器显示原始 json 数据(“stringify”是正确可见的，原始 json)。

每当我尝试使用数据绑定(bind)时，都会在浏览器中收到错误消息“TypeError: undefined is not an object (evalating '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;

Answer 1

由于边很可能是一个数组，因此您需要访问某个项目或映射整个数组，例如

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