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>
))}