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

InstructorTaylor Bell

Share this video with your friends

Send Tweet

In this lesson, we’ll use GraphQL to query for transformed Markdown blog posts and display links to each on your blog’s homepage.

Jan Kraus
~ 7 years ago

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>
William Whatley
~ 6 years ago

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?

Alex
~ 6 years ago

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)

Alex
~ 6 years ago

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

Taylor Bellinstructor
~ 6 years ago

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

Alex
~ 6 years ago

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?

Taylor Bellinstructor
~ 6 years ago

@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.

Alex
~ 6 years ago

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!

Taylor Bellinstructor
~ 6 years ago

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"
  },
Alex
~ 6 years ago

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.

Taylor Bellinstructor
~ 6 years ago

@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)

Alex
~ 6 years ago
Alex
~ 6 years ago

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

Taylor Bellinstructor
~ 6 years ago

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.