Use GraphQL in Gatbsy v1 to Create an Index of all Posts

When rendering collection of items in React each item should have associated key, otherwise React will complain. For example:

<div key={post.id}>
  {frontmatter.title}
</div>

Edit: I just deleted repo and started over and now it works.

I'm not sure why, but I'm not able to render the results in the browser--after running gatsby develop , my terminal says it is running on 8000, but Chrome will not display anything. It just says This localhost page can’t be found. Any ideas?

Any ideas why I'd be getting an error of × TypeError: Cannot read property 'allMarkdownRemark' of undefined (pages/index.js line 4)

import Link from 'gatsby-link'

const IndexPage = ({data}) => {
  const { edges: posts } = data.allMarkdownRemark
  return (
    <div>

Also getting an error in my terminal for Unknown field date on type frontmatter_2 (pages/index.js line 36)

If anyone else has found a solution to pass beyond video 3 please let me know.

Hi @Alex, have you tried comparing your code to the Github repository?

Yes, also restarted a couple times and just copied and pasted from the Github repo with the same issues. Could this be from dependency issues? I also noticed that when I create my base Gatsby blog it autogenerates a totally different layouts/index.js file then what is shown on Github. Could this mean I'm using a later version?

@Alex I started a brand new project, typing everything out from the start of the project and it's still working even with the other changes to Gatsby since the course's initial release.

To help you debug, instead of destructuring {data} in the IndexPage component, call it props then log it to your console to see what's in the object.

If you have an "unknown field date" error, do you have date in your example markdown file?

Ensure you aren't running Gatsby v2, as this course is for version 1.

Taylor, my Gatsby version is 1.1.58, I've restarted again, with an error in the layouts/index.js file that is still different from the one on GitHub. If I just copy the whole index.js from your GitHub, the 'Cannot read property 'allMarkdownRemark' of undefined' error returns. Sorry for the headache!

The 1.1.58 is gatsby-cli.

The dependencies section from package.json in the new project I started is:

  "dependencies": {
    "gatsby": "^1.9.247",
    "gatsby-link": "^1.6.40",
    "gatsby-plugin-react-helmet": "^2.0.10",
    "gatsby-source-filesystem": "^1.5.39",
    "gatsby-transformer-remark": "^1.7.44",
    "react-helmet": "^5.2.0"
  },

Mine are the same. So when you restarted it doesn't give you a default layouts/index.js file that is different from the GitHub?

For some reason, mine is different, and get an error in the default generated layouts/index.js, then if I copy from github, the error comes back.

@Alex the file edited in this lesson is src/pages/index.js, not layouts/index.js. Is this the problem?

At this point in the course, the only files that have been edited are gatsby-config.js to add the plugins (lesson 1), some Markdown files created in slug folders inside of src/pages/ (lesson 2) and adding the query to IndexPage at src/pages/index.js (this lesson)

Ok, ran npm install, found dependency issues! (9 high, 3 critical), fixed them and it works!! Sorry again for the headache!

Sweet! Glad it's working now.

One of my go-to troubleshooting steps is to rm -rf node_modules and run yarn or npm install when things are going weird.