GatsbyJS фильтрует запросы по пути к местоположению

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

Прямо сейчас я получаю все продукты на каждой «странице категорий» и использую JS для фильтрации продуктов, но я хочу с самого начала загружать только те данные, которые мне нужны.

Проблема в том, что переменная, по которой я предполагаю фильтровать, является переменной, которую я вычисляю из location.pathname; (Я удалил из фрагмента много неактуального кода)

Как мне найти синтаксис, позволяющий добавить к этому запросу еще один фильтр, использующий переменную "category" из этого компонента шаблона?

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              
        }
      }
    }
  }

Я должен войти в поле категорий, которое представляет собой массив, и проверить, включает ли оно переменную «category».


reactjs contentful gatsby graphql
person index.jsx    schedule 02.09.2018    source источник
comment
ЯГНИ? Вам это действительно нужно? Вы можете отфильтровать его в рендере (или fn, вызванном из рендера) перед возвратом. ИМХО, это ненужная оптимизация для генерации статических сайтов.   -  person xadm    schedule 02.09.2018

Ответы (1)


arrow_upward
2
arrow_downward

Это можно сделать с помощью переменных запроса Гэтсби:

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
            }
        }
    }
}

И переменную category можно установить с помощью параметра context в gatsby-node.js createPages:

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