Фильтр WordPress сообщений по категориям - проблема с graphql и gatsby.js

Question

Я хочу перечислить все сообщения WordPress на моей странице gatsby.js и отфильтровать их по категориям, когда пользователь нажимает на вкладку категории. Когда категория выбрана, я сохраняю ее как переменную «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

Просто чтобы уточнить, причина, по которой это не сработает, заключается в том, что у Гэтсби нет возможности генерировать сайт, который динамически загружает контент на основе набора переменных во время выполнения.Если бы он принял код, который вы написали, он мог бы генерировать только одну категорию «myCategory».Вместо этого Гэтсби просто отклоняет переменные в запросах.

По моему опыту, есть несколько вариантов:

1. Создание страницы для каждой категории с помощью gatsby-Node.js.https://www.gatsbyjs.org/tutorial/part-seven/

2. Используйте поисковый плагин.По сути, эта опция генерирует дерево на основе всех постов и помещает его на страницу, на которой отображается поиск.

3. Сделайте свой собственный поиск.Это похоже на # 2.Вам нужно будет ввести ВСЕ сообщения, создать компоненты для всех них, а затем установить их видимыми на основе состояния поискового компонента.