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

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>