Use GraphQL in Gatbsy v1 to Create an Index of all Posts
In this lesson, we’ll use GraphQL to query for transformed Markdown blog posts and display links to each on your blog’s homepage.
Instructor: [00:00] I'm in the My Blog directory, and I've run gatsby develop, which is running at localhost 8000. Inside my pages directory, I've got a few blog posts, but it'd be nice to display them on my blog.
[00:13] In order to do that, we're going to add a GraphQL query to index.js. Export const to query equals GraphQL, and then between a couple back ticks, we're going to call our query index query, so we're querying from all markdown remark. We'll want a total count, and then we'll set up edges, and then we'll add node.
[00:34] Each edge is the file system path to the node, which is our post. We'll give it an ID, and then from the front matter, we're going to want the title and have the date, pass it some formatting here, path, tags, and the excerpt we wrote.
[00:48] Now, that we have the GraphQL query written, let's update our component to actually display our data. We'll start by destructuring data into our index page component, and I'm going to reformat this so we can have a return statement.
[01:00] Now, we'll destructure edges and posts from data.allmarkdownremark. I'm going to clear out our existing markup, and we're going to map over our posts. We'll do posts.map, and then we'll get our post from our node, and then we'll destructure our front matter from our post. We'll return a div with an H2, and each H2 will have a link.
[01:24] We'll do a link to our frontmatter.path, and it will be called frontmatter.title. Then we'll have our date and our excerpt, save the file, and all of our posts are showing up.
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.
When rendering collection of items in React each item should have associated key, otherwise React will complain. For example: