How to make a list component to list my contentful posts

Question

I'm trying to make a list component that lists off my project Case Studies coming from my Contentful account. I'm trying to use Gatsby's Static Query component.

I tried to bring the data in and map it to the list item component that basically takes the Title and URL as props into a Link component like as follows:

<li><Link to={this.props.url} >{this.props.title}</Link></li>

This is what I have: (ignore the misspelling in caseStudyTitile...)

import React from 'react'
import CaseItem from './caseItem/caseItem';

import { StaticQuery } from 'gatsby';

const Cases = () => (
    <StaticQuery
        query={graphql`
        query CaseStudyQuery {
            allContentfulCaseStudy {
                edges {
                    node {
                        caseStudyTitile
                        slug
                    }
                }
            }
        }
        `}
        render={data => (
            <div className="Cases">
                <h3>Case Studies</h3>
                <ul>
                    {data.allContentfulCaseStudy.edges.map(node => (
                        <CaseItem 
                            title={node.caseStudyTitile} 
                            url={node.slug}/>
                    ))}
                </ul>
            </div>
        )}
    />

)

export default Cases

I expect to get a list of clickable links to my Case Studies. Instead I'm getting a list of empty List Items with empty Links

score 1 · Accepted Answer · answered Apr 02 '19 at 04:04

Since edges is shaped like this [{ node: {...} }, { node: {...} }, ...] You'd need to unwrap node:

- data.allContentfulCaseStudy.edges.map(node => (
+ data.allContentfulCaseStudy.edges.map(({ node }) => (

If you're using gatsby 2.2.0 and above, you can use this shortcut query:

  query CaseStudyQuery {
    allContentfulCaseStudy {
      nodes {  // <--- short for `edges { node { ... } }`
        caseStudyTitile
        slug
      }
    }
  }

and access it much easier like data.allContentfulCaseStudy.nodes.map(node => ...)

How to make a list component to list my contentful posts

1 Answers1