I am following this example for creating a blog with Gatsby.
Throughout this tutorial, assignment notation is used like so:
export default function Index({ data }) {
const { edges: posts } = data.allMarkdownRemark
return (
<div className="blog-posts">
{posts
.filter(post => post.node.frontmatter.title.length > 0)
.map(({ node: post }) => {
return (...);
})}
</div>
)
}
Line 2, which appears to me as deconstructing assignment, is confusing to me. From what dictionary are we assigning the key edges's value posts to? Why are we able to reference posts later on without referencing it using the edges key?
You've stumbled upon destructuring and assigning to a new variable.
You can find the docs here and the scroll down to Assigning to new variable names.
What it does is that you are giving a declaring a new variable (in your case named posts that has the value of data.allMarkdownRemark.edges.
The syntax may seem backwards as edges is giving value to posts and not the other way around, but I think this makes sense if you think about it a bit.
Having it like this allows you to change from this:
const { edges } = data.allMarkdownRemark
to this:
const { edges: posts } = data.allMarkdownRemark
with minimal changes.