Generating pages in Gatsby from two sources of mdx files using graphql

Question

Need help with GraphQL and Gatsby. Task: separate requests and page generation based on mdx, depending on where the file is located.

Simply put: I have a blog and news on the site. The content for the blog is in one folder, and for the news in the next one. All in mdx format.

Difference: the news has a title, the blog has a header.

Lists for files on different pages, as well as the posts and news themselves, are generated according to their own templates.

Hooks are created to get the data in the appropriate folder.

Problem:

1. only 1 hook works, which overwrites the second hook
2. post and news pages are generated from all files

Example site: https://github.com/Tecnika/test-site

Sample:

• use different types of files.

--- The idea is good, but not suitable for the original project, maybe there are not enough file types

• use your type

--- The type was created, but it was not possible to bind it to files and all requests for it were empty (the NewsPages type was created, the search for AllNewsPages returned an empty array)

• sorting, filters

--- limit only display list, not page generation

If any of this works in your opinion, then please show me how to do it right.

Need to:

-Generate blog and news lists independently of each other

-Generate pages with posts and news based on their templates

(It is possible to increase the generated pages, for example, a catalog of cats, with pages of cats)

Answer 1

Closed question.

I use new plagins:

gatsby-plugin-mdx-source-name to search for the desired groups of files (distributed by folders)

    //gatsby-config.js
    const path = require('path')
module.exports = {
    /*...*/

 plugins: [
              /*...*/
      "gatsby-plugin-mdx",
        `gatsby-plugin-mdx-source-name` ,
        {
          resolve: `gatsby-source-filesystem`,
          options: {
            name: `news`,
            path: `${__dirname}/src/content/news/`,
          }
        }, {
          resolve: `gatsby-source-filesystem`,
          options: {
            name: `blog`,
            path: `${__dirname}/src/content/posts/`,
      }
    },
  ],
}

and here I create a request for all files, sort by nodes and send to the desired page template

//gatsby-node.js
const path = require('path')
exports.createPages = async ({ graphql, actions }) => {
    const { createPage } = actions
    const blogPostTemplate = path.resolve('./src/templates/blog-post.js')
    const newsPostTemplate = path.resolve('./src/templates/news.js')
    const result = await graphql(`
        query {
            allMdx {
                edges {
                  node {
                    id
                    fields {
                      source
                    }
                    frontmatter {
                      author
                      header
                      slug
                      title
                    }
                  }
                }
              }
        }
        `)
      
        const posts = result.data.allMdx.edges.filter(edge => edge.node.fields.source === "blog")
        posts.forEach(edge => {
            createPage({
                path: `/blog/${edge.node.frontmatter.slug}`,
                component: blogPostTemplate,
                context: {
                    slug: edge.node.frontmatter.slug
                }
            })
        })
        const news = result.data.allMdx.edges.filter(edge => edge.node.fields.source === "news")
        news.forEach(edge => {
            createPage({
                path: `/news/${edge.node.frontmatter.slug}`,
                component: newsPostTemplate,
                context: {
                    slug: edge.node.frontmatter.slug
                }
            })
        })
     
    }