Pulling multiple items from a collection for a blog post

Hello there!

I have reached a block in creating a blog post template. Basically all I want is to have the Author Name and Thumbnail.

In the Netlify CMS config file, I am able to get the Author Name from the relation widget.

- {label: "Author", name: "author", widget: "relation", collection: "authors", searchFields: ["title"], valueField: "title", displayFields: ["title"], required: true}

Issue with this is that I only get the Author Name to be referenced in the Blog Post.

So I looked around and there was a similar questioned referenced in the community

Get entire collection data from relation widget

And I agree that copying the entire collection would make unnecessary copies that are not needed.

So I tried making a query to see if I can solve this issue

markdownRemark(frontmatter: {title: {eq: "Jacob Byers"}}) {
    frontmatter {
      thumbnail {
          childImageSharp {
            fluid(maxWidth: 120, quality: 100) {
              ...GatsbyImageSharpFluid
            }
          }
        }
    }
  }

And the eq worked to get the Author Thumbnail that I manually entered. So I hoped that I could add a variable in the eq field but learned that Graphql does not allow interpolation.

So I am left scratching my head. I could do another query to loop through all of my authors but dont feel that it is a good idea for the long haul for this site will become cumbersome over time.

Has anyone dealt with this issue before? I am looking at other options but wanted to ask the community.

Referencing Get entire collection data from relation widget for context.

You could iterate during build time over the collection that contains the relation widget (the one with the - {label: "Author", name: "author", widget: "relation", collection: "authors", searchFields: ["title"], valueField: "title", displayFields: ["title"], required: true} field), get the author value, then use it to query the author data.

I think I understand what you mean. So I spent time understanding how tags and tag pages work in the original gatsby netlify template and found this helpful link.

Is there a way to query/gain access to other markdown files/nodes when resolving a Graphql query?

Basically I had to filter for the node for author since I already had a way to create author pages. I added the following to my gatsby-node.js file. This way I could access the thumbnail from the author page.

//Make Author Nodes
exports.sourceNodes = ({ actions, getNodes, getNode }) => {
  const { createNodeField } = actions

  const markdownNodes = getNodes()
    .filter(node => node.internal.type === `MarkdownRemark`)
    .forEach(node => {
      if (node.frontmatter.author) {
        const authorNode = getNodes().find(
          node2 =>
            node2.internal.type === `MarkdownRemark` &&
            node2.frontmatter.title === node.frontmatter.author
        )

        if (authorNode) {
          createNodeField({
            node,
            name: `author`,
            value: authorNode.id,
          })
        }
      }
    })

The second thing I had to do was map it to my gatsby config file by adding this section

mapping: {
    'MarkdownRemark.fields.author': `MarkdownRemark`,
  },

This allowed me to access the author’s thumbnail in a single query in the blog post’s markdownRemark’s field section. Here is my full query with the author’s details.

export const pageQuery = graphql`
  query BlogPostByID($id: String!) {
    markdownRemark(id: { eq: $id }) {
      id
      html
      timeToRead
      fields {
        author {
          frontmatter {
            thumbnail {
              childImageSharp {
                fluid(maxWidth: 120, quality: 100) {
                  ...GatsbyImageSharpFluid
                }
              }
            }
          }
        }
      }
      frontmatter {
        date(formatString: "MMMM DD, YYYY")
        title
        description
        featuredimage {
          childImageSharp {
            fluid(maxWidth: 120, quality: 100) {
              ...GatsbyImageSharpFluid
            }
          }
        }
        author
        tags
      }
    }
  }
`

And now the author’s picture appeared on my blog post. Is this close to what you meant @erez?

1 Like

That is much better than I had in mind! (I was thinking two queries, but your solution is much better :slight_smile:)

1 Like