graphql - 我可以在我的 Gatsby 项目中分别为两个不同的文件夹创建两个不同的 graphql 查询吗

Question

我是一名新手程序员，最近我想在我的网站上添加一个博客页面。我已经有一个使用 Graphql 和 .md 文件的项目页面，现在我的问题是，每次我尝试使用 .md 创建博客文章时，它也会出现在我的项目页面中，能否请您以您的一些经验给我建议关于解决这个问题，我是否必须创建一个单独的查询？连我都不知道怎么办？

这是我当前的查询。

export const query = graphql`
  query ProjectsPage {
    allMarkdownRemark(sort: { fields: frontmatter___date, order: DESC }) {
      nodes {
        frontmatter {
          slug
          stack
          title
          thumb {
            childImageSharp {
              gatsbyImageData(placeholder: BLURRED, layout: FULL_WIDTH)
            }
          }
        }
        id
      }
    }
  }

Answer 1

您可以做的一件简单的事情是在您的 markdown 文件中添加一个 key 字段来区分帖子和项目。这将允许您过滤 GraphQL 查询。同理，你也可以将markdowns放在单独的文件夹中，使用相对/绝对路径进行过滤。

export const query = graphql`
  query ProjectsPage {
    allMarkdownRemark(filter: { frontmatter: {key: { eq: "project" }}, sort: { fields: frontmatter___date, order: DESC }) {
      nodes {
        frontmatter {
          slug
          stack
          title
          thumb {
            childImageSharp {
              gatsbyImageData(placeholder: BLURRED, layout: FULL_WIDTH)
            }
          }
        }
        id
      }
    }
  }

正如我所说，这种方法假设您已经在 markdown 文件中创建了一个 key: project 字段。您可以使用 key: article 执行相同的操作。

或者，如果需要，可以使用 fileAbsolutePath/relativePath 将 markdowns 放置在不同的文件夹中。这种方法将依赖于您的文件系统结构来确定可用路径。这两种方法都基于过滤查询，请选择更适合您的方法。

使用 GraphiQL playground 在 localhost:8000/___graphql 测试所有查询、路径和过滤器