Collections in Gatsby

This stackoverflow question pretty much describes my current problem.

I'm creating two types of posts on my blog.

1. blogposts
2. til notes

The blocker is that {mdx.slug}.js template creates pages for all mdx files in the same way but I need to define different templates for differnt types of posts which are all .mdx files.

So that I can have a {blogPost.slug}.js file that houses my blogpost template and {til.slug}.js that houses my til template.

I think this blogpost offers a promising solution where I would create nodes that align with blogposts and tils and call them like shown in the above sentence.

A promising github issue that I had opened but overlooked.

Also, this github thread is wild to me! I like how he got soo much help and how he phrases his questions. Imposter syndrome 101. lol.

05/10/2022

After about 3 hours here trying to get this to work, I'm realizing that a number of the sites I've looked at use the createPages api to differentiate different types of pages as opposed to using the sourceNodes api.

And from this github issue it seems that you can't use the sourceNodes api in the way I wanted because you can't use graphql queries within the sourceNodes.

Next Steps:

• [] write down why what you're trying wasn't working
• [] pivot and make it work
• [] write down how you made it work
• [] make it into a blogpost

const { graphql } = require('gatsby');

exports.sourceNodes = async ({
  actions,
  createNodeId,
  createContentDigest,
}) => {
  const { createNode } = actions;

  // get all blogposts from Gatsby's local graphql server
  const result = await graphql(`
    query {
      allMdx(filter: { frontmatter: { type: { eq: "blogpost" } } }) {
        nodes {
          frontmatter {
            title
            type
          }
          id
        }
      }
    }
  `);

  // create blogpost nodes that I can then use to creat a template: /pages/blog/{blogPost.slug}.js

  blogposts.data.forEach(node, (index) => {
    createNode({
      ...node,
      id: createNodeId(`${node.type}-${node.id}`),
      parent: null,
      children: [],
      internal: {
        type: node.type,
        content: JSON.stringify(node),
        contentDigest: createContentDigest(node),
      },
    });
  });
};

the problem here is at the point where sourceNodes is run, the graphql schema doesn't exist yet, so you can't querry the nodes like I was attempting to do.

I found this out from this github issue

the strategy moving forward would be to learn how the createPages api works and work on using it to create /blog and /tils

I can use the code from gatsby-starter-blog/gatsby-node.js as a starting point.

This is also a useful resource on Migrating Remark to MDX that covers migrating the gatsby starter blog from remark to mdx.

17/10/2022 Whithin an hour I was able to use the createPage api to create collections that work. Now I just need to clean up my files and ship this feature! Super stoked to be shipping!

Resouces:

1. Creating Pages from Data Programmatically
2. https://www.gatsbyjs.com/docs/creating-and-modifying-pages/#trade-offs-of-querying-for-all-fields-in-the-context-object-of-gatsby-nodejs

I am also querrying everything from the gatsby-node.js file and passing it to the templates using the pageContext prop. As the site grows, this can have perfomace implications. But I'm deducing that I might have to write a lottt of posts to get to the point where I hit performance bottlenecks.

I think this learning process could be a foray into technical writing post EngEd.

I found this post that's written in a very friendly manner A Beginner’s Journey to Launching a Website and I think I can tottaly do something similar.

So I'll write this up properly then pitch it to CSS tricks.