在组件中使用来自 GraphQL 的查询数据

Question

我目前正在使用 React/Gatsby 使用 Semantic UI 中的组件创建一个表。这个表应该是可排序的，所以我想使用来自https://react.semantic-ui.com/collections/table/#variations-sortable 的组件并将其粘贴到我的项目中，看看它是如何工作的。

组件现在可以工作，但我希望显示我的数据而不是 tableData。

我正在使用 GraphQL 查询来获取数据，如下所示：

export const query = graphql`
query {
  data {
    edges {
      node {
        entry1
        entry2
        entry3
      }
    }
  }
}`;

我的问题是我不知道如何在这个特定组件中传递查询的数据：https://codesandbox.io/s/ozip5?module=/example.js&file=/example.js

我阅读了很多关于使用 StaticQuery 的内容，但据我所知，这需要我在另一个组件中使用它，这很好 - 但这并不奏效。

有没有办法使用查询的数据（来自 GraphQL）而不是示例中的 tableData？

提前致谢。

Answer 1

这样的事情应该可以工作：

import * as React from 'react'
import { graphql } from 'gatsby'
import { Table } from 'semantic-ui-react'

 const HomePage = ({data}) => {
  return (
      <Table sortable celled fixed>
      <Table.Header>
        <Table.Row>
          <Table.HeaderCell
            sorted={column === 'name' ? direction : null}
            onClick={() => dispatch({ type: 'CHANGE_SORT', column: 'name' })}
          >
            Name
          </Table.HeaderCell>
          <Table.HeaderCell
            sorted={column === 'age' ? direction : null}
            onClick={() => dispatch({ type: 'CHANGE_SORT', column: 'age' })}
          >
            Age
          </Table.HeaderCell>
          <Table.HeaderCell
            sorted={column === 'gender' ? direction : null}
            onClick={() => dispatch({ type: 'CHANGE_SORT', column: 'gender' })}
          >
            Gender
          </Table.HeaderCell>
        </Table.Row>
      </Table.Header>
      <Table.Body>
        {data.data.map(node => {
         console.log("your node data is", node);       
  
         return <Table.Row key={node.entry1}>
            <Table.Cell>{node.entry1}</Table.Cell>
            <Table.Cell>{node.entry1}</Table.Cell>
            <Table.Cell>{node.entry1}</Table.Cell>
          </Table.Row>
        })}
      </Table.Body>
    </Table>
  )
}

export const query = graphql`
query {
  data {
    edges {
      node {
        entry1
        entry2
        entry3
      }
    }
  }
}`;

export default HomePage

注意：根据需要删除/调整<Table.HeaderCell> 组件。

使用页面查询或StaticQuery（或useStaticQuery 挂钩）都没有关系。您可以选择自己喜欢的方法来获取数据，它适用于两种情况，您只需要记住您是在页面组件中还是不选择其中一种。

在这种情况下，您的数据存储在 props.data.data 中。您只需为查询中的每个entry 显示一个<Table.Row>。

有用的参考资料：

• https://www.gatsbyjs.com/docs/how-to/querying-data/page-query/
• https://www.gatsbyjs.com/docs/how-to/querying-data/static-query/