时间戳

首页 > 解决方案 > 按类别过滤 wordpress 帖子 - graphql 和 gatsby.js 的问题

wordpress - 按类别过滤 wordpress 帖子 - graphql 和 gatsby.js 的问题

问题描述

我想在我的 gatsby.js 页面上列出所有 wordpress 帖子，并在用户单击类别选项卡时按类别过滤它们。选择类别后，我将其保存为“choosenCategory”变量，它是一个字符串。我在寻找将变量传递给我的查询的方法时遇到问题，但这种方法不起作用：

const chosenCategory = "myCategory";

const PostListingData = (props) => (
  <StaticQuery
    query={graphql`
      query($name: String = chosenCategory)  {
        allWordpressPost(filter:
          { categories:
            { elemMatch:
              { name:
                { eq:
                 $name
                }
              }
            }
          }
        )
      {
          edges {
            node {
              id
              title
              categories {
                name
              }
            }
          }
        }
     }
    `}
    render={data => <PostsListing data={data} {...props} />}
  />
)

const PostsListing = ({ data }) => {
  return (
    <div>
        {data.allWordpressPost.edges.map(({ node }, i) => (
          *** some code ***
         ))}
    </div>
)}

标签： wordpressreactjsgraphqlgatsby

解决方案

澄清一下，这不起作用的原因是 Gatsby 无法生成一个基于运行时设置的变量动态加载内容的站点。如果它确实接受了您编写的代码，它将只能生成一个类别“myCategory”。Gatsby 没有这样做，而是拒绝了查询中的变量。

根据我的经验，有几个选择：

  1. 使用 gatsby-node.js 为每个类别生成一个页面。https://www.gatsbyjs.org/tutorial/part-seven/

  2. 使用搜索插件。本质上，此选项是根据所有帖子生成树并将其放在搜索显示的页面上。

  3. 进行自己的搜索。这类似于#2。您必须引入所有帖子，为所有帖子制作组件，然后根据搜索组件的状态将它们设置为可见。

推荐阅读