将const添加到类组件以显示来自Gatsby站点中Contentful CMS的数据

Question

I am attaching a link to an image showing query in GraphQL我在开始在Gatsby网站上显示Contentful中的内容时遇到问题。我已经建立了什么查询将访问一个简单的文本字段数据。我很困惑如何将这些数据添加到构建页面的类组件中。我想我在返回部分的JSX中下面有一个适当的代码，但我不知道如何将数据传递给组件。

下面是我的代码，它从CMS中获取数据：

const data = useStaticQuery(graphql`
    query {
        allContentfulHomepage{
          edges {
            node {
              section1Title
            }
          }

        }
      }
  `)

我想将其添加到这样的有状态组件中：

class IndexPage extends React.Component { }

我认为我的问题在于数据的传递，但是下面我另外展示了如何返回数据：

<div className = "section-text small-text" > {
    data.allContentfulHomepage.edges.map((edge) => {
        return ( 
            <h2> {
                edge.node.section1Title
            } 
            </h2>
        )
    })
} 
</div>