Hey @angelo-martinez
I have been reading this over and need a clarification on something. Are you trying
A) Link blog posts to a category or tag? So when you go to a category or tag page you see a list of posts that are linked to that criteria?
B) Are you trying to link other blog posts to a present post? Like for example when I am reading a tech article I see links that let me dig further into other articles. But instead of a link you want to have a preview for that post including the title and maybe an image?
Option A should have a working example for tags in the Netlify Gatsby Template. Option B is similar to the example above or the article the erez provided. Basically building the nodes and mapping them to others.
Something thing to consider is that the file name may be easier to query than slug. I found that to be true when linking other pages in the cms. However, I only went as far using it to create a link and not to pull an image or preview but that could be done with my example above.
Another thing to consider is to use multiple queries on your page. This can be done by adding variables in your query.
export const homePageQuery = graphql`
query HomePageTemplate($id: String) {
homepage: markdownRemark(id: { eq: $id } frontmatter: { templateKey: { eq: "home-page" } }) {
html
frontmatter {
heading
body
}
}
blogPosts: allMarkdownRemark(
sort: { order: DESC, fields: [frontmatter___date] }
filter: { frontmatter: { templateKey: { eq: "blog-post" } } }
limit: 3
) {
edges {
node {
id
fields {
slug
}
timeToRead
frontmatter {
title
}
}
}
}
}
`
That way when you query you can use data.homepage.frontmatter to query items specific to the page and then data.blogPosts.frontmatterto query from all blog posts.
And if you want to throw variables into your queries I would look into adding context to your gatsby-node.js file. For example, for my posts, I added title in mine so I can find it in my queries.
posts.forEach(edge => {
const id = edge.node.id
const title = edge.node.frontmatter.title
createPage({
path: edge.node.fields.slug,
tags: edge.node.frontmatter.tags,
component: path.resolve(
`src/templates/${String(edge.node.frontmatter.templateKey)}.js`
),
// additional data can be passed via context
context: {
id,
title,
},
})
})
So when I want to pull all posts for that category I can do so with pageContext
const CategoryPage = ({ pageContext, data }) => {
const { title } = pageContext
const { allMarkdownRemark: category} = data
return (
<Layout>
<Container size={'regular'}>
<h1>{title}</h1>
<BlogRoll
data={category}
/>
</Container>
</Layout>
)
}
Then I use pageContext as a variable in my query.
export const query = graphql`
query CategoryPage($title: String) {
allMarkdownRemark(
limit: 2000
sort: { fields: [frontmatter___date], order: DESC }
filter: {frontmatter: {templateKey: {eq: "blog-post"}, category: { in: [$title] }}}
) {
edges {
node {
fields {
slug
}
frontmatter {
title
templateKey
author
}
}
}
}
}
`
This query pulls all posts that are connected to the variable [$title] which is the name of the category.
)