GraphQL 查询仅显示原始结果

Posted 2023-03-08

【中文标题】GraphQL 查询仅显示原始结果

【英文标题】：GraphQL query displays only raw results

【发布时间】：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 数组。

【参考方案1】：

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

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