Question

我想在我的gatsby.js页面上列出所有wordpress帖子，并在用户单击category-tab时按类别过滤它们。选择类别后，我将其另存为“ 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>
)}

Answer 1

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

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

使用gatsby-node.js为每个类别生成一个页面。 https://www.gatsbyjs.org/tutorial/part-seven/
使用搜索插件。本质上，此选项是根据所有帖子生成一棵树，并将其放在搜索显示的页面上。
进行自己的搜索。这类似于＃2。您必须引入所有帖子，为所有帖子制作组件，然后根据搜索组件的状态将它们设置为可见。

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

1 个答案: