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

Question

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

组件现在正在工作，但我希望显示我的数据，而不是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/