GatsbyJS 按位置路径名过滤查询答案

【问题标题】：GatsbyJS filter queries by location pathnameGatsbyJS 按位置路径名过滤查询
【发布时间】：2019-02-07 17:27:51
【问题描述】：

我正在建立一个产品博客，每个产品都属于几个类别。您可以单击某个类别，它会将您带到一个仅显示具有该类别的产品的页面。

现在，我在每个“类别页面”上获取所有产品，并使用 JS 过滤产品，但我只想从一开始就加载我需要的数据。

问题是我要过滤的变量是我从 location.pathname 计算的变量；（我从sn-p中删除了很多不相关的代码）

如何找到允许我向此查询添加另一个过滤器的语法，该过滤器使用此模板组件中的“类别”变量？

render() {
    const { classes } = this.props
    const posts = get(this, 'props.data.allContentfulBlog.edges')
    const edges = this.props.data.allContentfulBlog.edges

    const category = location.pathname

    return (
      <div className={classes.container}>        
      </div>
    )
  }

query categoryPostQuery {
    allContentfulBlog(
      filter: { node_locale: { eq: "en-US" } }
      sort: { fields: [date], order: DESC }
    ) {
      edges {
        node {
          id
          categories
          date(formatString: "DD MMMM, YYYY")
          slug              
        }
      }
    }
  }

我应该输入类别字段，这是一个数组，并检查它是否包含“类别”变量。

【问题讨论】：

雅格尼？你真的需要吗？您可以在返回之前在渲染中过滤它（或从渲染中调用 fn）。恕我直言，这是对静态网站生成的不必要优化。

标签： reactjs graphql gatsby contentful

【解决方案1】：

这可以使用 Gatsby 的 query variables 来完成：

query categoryPostQuery($category: String) {
    allContentfulBlog(
        filter: { node_locale: { eq: "en-US" }, categories: { in: [$category] } }
        sort: { fields: [date], order: DESC }
    ) {
        edges {
            node {
                id
                categories
                date(formatString: "DD MMMM, YYYY")
                slug
            }
        }
    }
}

并且可以使用gatsby-node.jscreatePages中的context选项设置category变量：

createPage({
    path,
    component: categoryTemplate,
    // If you have a layout component at src/layouts/blog-layout.js
    layout: `blog-layout`,
    context: {
       category: 'games'
    },
})

【讨论】：