GraphQL 查询仅显示原始结果答案

【问题标题】：GraphQL query displays only raw resultsGraphQL 查询仅显示原始结果
【发布时间】：2020-05-20 18:19:14
【问题描述】：

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

每当我尝试使用数据绑定时，我都会在浏览器中收到错误消息“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;

【问题讨论】：

您是否尝试过使用这种方法？ gatsbyjs.org/docs/page-query/…
顺便说一句，你不会做ProjectTitles.edges.node.frontmatter.tittle - ProjectTitles.edges 是一个数组，所以取决于你想用哪个项目来显示标题，你必须使用类似ProjectTitles.edges[index].node.frontmatter.title
除了上述注释之外，您还可以在尝试访问任何数组项的子属性之前映射ProjectTitles.edges 数组。

标签： reactjs typescript graphql gatsby

【解决方案1】：

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

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

【讨论】：