Gatsby: How Do I Make a List of All Nodes? - graphql

Question

I want to make a list of all unique node values and render them on my page. This is what I have:
import { graphql, Link } from "gatsby"
import React from "react"
import Layout from "../layouts/Layout"
const _ = require("lodash")
export default props => {
const majorNodes = props.item.edges.node
let majors = []
let major = []
majorNodes.map(majorNode => majors.push(majorNode.major))
majors = majors.concat(major)
majors = _.uniq(majors)
return (
<Layout>
<div>{majors}</div>
</Layout>
)
}
export const query = graphql`
query majors {
item: allContentfulPortfolio {
edges {
node {
major
}
}
}
}
`
However, this gives me the following error:
TypeError: Cannot read property 'edges' of undefined
_default
D:/Gatsby/archives/src/pages/majors.js:7
4 | const _ = require("lodash")
5 |
6 | export default props => {
> 7 | const majorNodes = props.item.edges.node
8 | let majors = []
9 | let major = []
10 | majorNodes.map(majorNode => majors.push(majorNode.major))
How do I fix this? Additionally, is this how I should pass the array majors for rendering? I think that is where I am going wrong.

Answer 1

Your nodes are stored inside props.data so:
const majorNodes = props.item.edges.node
Should become:
const majorNodes = props.data.item.edges.node
Additionally, is this how I should pass the array majors for
rendering? I think that is where I am going wrong.
majors is an array so printing it directly as:
<div>{majors}</div>
Won't work.
You should loop through each element with something like:
<div>{majors.map(major => <p> Major element is {major}</p> )}</div>