Есть ли способ подсчитать продукты в соответствии с определенной категорией, не делая разные компоненты нумерации страниц для категорий? - PullRequest
Новая
       6

Есть ли способ подсчитать продукты в соответствии с определенной категорией, не делая разные компоненты нумерации страниц для категорий?

0 голосов
/ 13 апреля 2019

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

я могу создавать разные файлы разбивки на страницы, поскольку у меня есть только две категории, по которым я хочу отсортировать и сосчитать, но есть ли способ избежать этого?

Модель продукта: 

type Product{
  id:ID! @unique
  name: String
  description: String
  price: Int
  colors: String
  quantity: Int
  category: String
  subCategory:String
  image:String 
  user:User!
}

Компонент нумерации страниц: 

const PAGINATION_QUERY = gql`
query PAGINATION_QUERY {
    productsConnection {
        aggregate{
            count
        }
    }
}
`

const Pagination = props => (

    <Query query={PAGINATION_QUERY}>
        {({ data, loading, error }) => {
            if (loading) return <p>Loading...</p>
            const count = data.productsConnection.aggregate.count
            const pages = Math.ceil(count / perPage)
            const page = props.page

            return (
                <PaginationStyles>
                    <Head>
                        <title>
                            Art Craft | Page: {page}
                        </title>
                    </Head>
                    <Link prefetch href={{
                        pathname: '/products',
                        query: { page: page - 1 }
                    }}>
                        <a className='prev' aria-disabled={page <= 1}> ⇚ Prev </a>
                    </Link>
                    <p>Page: {page} of {pages}</p>
                    <Link prefetch href={{
                        pathname: '/products',
                        query: { page: page + 1 }
                    }}>
                        <a className='prev' aria-disabled={page >= pages}> Next ⇛ </a>
                    </Link>
                </PaginationStyles>
            )
        }}
    </Query>

)
export default Pagination

Компонент продукта: 

export default class Products extends Component {
    render() {
        return (
            <center>
                <Pagination page={this.props.page} />
                <Query query={ALL_PRODUCT_Q} variables={{
                    skip: this.props.page * perPage - perPage,
                }}>
                    {
                        ({ data, error, loading }) => {
                            if (loading) return <p>Loading...</p>
                            if (error) return <p>You got a error...{error.message}</p>
                            // console.log(data.products)
                            return <ProductList>
                                {
                                    data.products.map(item => <Product key={item.id} product={item} />)
                                }
                            </ProductList>
                        }
                    }
                </Query>
                <Pagination page={this.props.page} />
            </center>
        )
    }
}

const ALL_PRODUCT_Q = gql`
    query ALL_PRODUCT_Q ($skip: Int =0, $first: Int=${perPage}) {
        products(first :$first, skip:$skip, orderBy:createdAt_DESC){
            id
            name
            price
            description
            colors
            quantity
            image
        }
    }
`

1 Ответ

1 голос
/ 26 апреля 2019

Вы можете отфильтровать ваши продукты в запросе на соединение: 

query PAGINATION_QUERY {
    productsConnection(where: {category: "myCategory"}) {
        aggregate{
            count
        }
    }
}

Это будет учитывать только товары с вышеупомянутой категорией. Затем в запросе вашей продукции вы также можете фильтровать по той же категории.

...