Запрос GraphQL отображает только необработанные результаты

Question

У меня есть вид запросов GraphQL (React, Gatsby, Typescript). Но браузер отображает только необработанные json данные («stringify» - это то, что правильно видно, raw json).

Всякий раз, когда я пытаюсь использовать привязки данных, я получаю сообщение об ошибке «Ошибка типа: undefined не является объектом (оценивающим« ProjectTitles.edges.node »)» в браузере. Но не в консоли. Что может быть не так? Вот код:

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

); }; экспорт по умолчанию ProjectList;

Answer 1

Поскольку ребра, скорее всего, будут массивом, вам необходимо получить доступ к определенному элементу или отобразить весь массив, например,

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