Gatsby & Graphql：过滤 allMarkdownRemark 以查找匹配变量的页面

Question

我正在尝试过滤我所有的降价页面，寻找与某个 category（在降价 frontmatter 中指定）匹配的页面以及不是当前访问的页面的页面。尽管从 markdown 创建的所有页面都收到了与 allMarkdownRemark 相同的结果，但没有过滤任何结果。

我想知道如何让所有页面对allMarkdownRemark 产生不同的结果，并希望过滤allMarkdownRemark 中的结果

我的页面查询看起来像

    export const pageQuery = graphql`
        query ArticleQuery($path: String, $category: String, $title: String) {
            allMarkdownRemark(
                filter: {
                    frontmatter: {
                        category: {eq: $category},
                        title: {ne: $title}
                    }
                },
                sort: {
                    order: DESC, fields: [frontmatter___date] 
                }
            ) {
            ...

我的gatsby-node.js 看起来像

const { createFilePath } = require(`gatsby-source-filesystem`);
const { fmImagesToRelative } = require('gatsby-remark-relative-images-v2');
const path = require("path");

exports.createPages = async ({ actions: { createPage }, graphql }) => {
    const postTemplate = path.resolve(`src/components/ArticlePage.jsx`);

    const result = await graphql(`
    {
      allMarkdownRemark(
        sort: { order: DESC, fields: [frontmatter___title] }
      ) {
        edges {
          node {
            fields {
              slug
            }
            frontmatter {
              category
              title
            }
          }
        }
      }
    }
  `);

    if (result.errors) {
        return Promise.reject(result.errors);
    };

    result.data.allMarkdownRemark.edges.forEach(({ node }) => {
        createPage({
            path: `${node.fields.slug}`,
            category: `${node.frontmatter.category}`,
            title: `${node.frontmatter.title}`,
            component: postTemplate,
            context: {node}
        });
    });
};

exports.onCreateNode = ({ node, getNode, actions }) => {
  fmImagesToRelative(node);
  if (node.internal.type === `MarkdownRemark`){
    actions.createNodeField({
        node,
        name: `slug`,
        value: createFilePath({ node, getNode, basePath: `pages`, trailingSlash: true }),
    });
  }
};

所有降价文件都包含类似的内容

---
title: "My title"
category: "My category"
---

Answer 1

我想知道如何让所有页面不一样 allMarkdownRemark 的结果，并希望得到结果 allMarkdownRemark 被过滤

在这些情况下，常用的是 key 字段，用于您要分组的所有类型的降价文件。正如您所说，allMarkdownRemark 是 Gatsby（及其转换器和锐器）在您允许它访问您的文件系统时推断的模式，因此您无法直接区分降价的类型。这是最简单、最干净、侵入性更小的选项。你只需要：

---
title: "My title"
category: "My category"
key: "pageTypeOne"
---

然后，在您的查询中，您只需要在需要时过滤key 字段：

export const pageQuery = graphql`
    query ArticleQuery($path: String, $category: String, $title: String) {
        allMarkdownRemark(
            filter: {
                frontmatter: {
                    category: {eq: $category},
                    title: {ne: $title}
                    key: {eq: "pageTypeOne" }
                }
            },
            sort: {
                order: DESC, fields: [frontmatter___date] 
            }
        ) {
        ...

如果需要，您可以在gatsby-node.js 的createPage API 中将基于字符串的方法更改为上下文方法。或者，根据您的需要，在您的 gatsby-node.js 中创建过滤查询，为每个页面创建不同的查询，这样您的 markdownRemark 将被过滤。

或者，您可以添加不同的文件系统 (gatsby-source-filesystem) 并使用推断的 sourceInstanceName 来获取您的数据：

{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `pages`,
    path: `${__dirname}/src/pages/`,
  },
},
{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `posts`,
    path: `${__dirname}/src/posts/`,
  },
},

然后：

{
  allFile(filter: { sourceInstanceName: { eq: "posts" } }) {
    edges {
      node {
        extension
        dir
        modifiedTime
      }
    }
  }
}