Use queried data from GraphQL in component

I'm currently working with React/Gatsby to create a table using a component from Semantic UI. This table should be sortable, so I want to use the component from https://react.semantic-ui.com/collections/table/#variations-sortable and pasted it in my project to see how it would work.

The component is now working, but I want my data to be displayed instead of tableData.

I'm using a GraphQL query to get the data, like so:

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

My problem is that I can't figure out how to pass the queried data in this particular component: https://codesandbox.io/s/ozip5?module=/example.js&file=/example.js

I read a lot about using StaticQuery but as I understand, this requires me to use it in a another component, which would be fine - but this didn't work as well.

Is there some way to use the queried data (from GraphQL) instead of the tableData from the example?

Thanks in advance.

Solution

Something like this should work:

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

Note: Remove/Adapt the <Table.HeaderCell> component as needed.

It doesn't matter if you use a page query or a StaticQuery (or useStaticQuery hook). You can choose your preferred method to fetch data, it will work in both scenarios, you only need to keep in mind if you are in a page component or not to choose one or another.

Your data, in this case, is stored inside props.data.data. You only need to display a <Table.Row> for each entry in your query.

Useful references: