Блог

Главная - Вопросы по программированию - Есть ли способ подсчитать товары в соответствии с определенной категорией без создания разных компонентов разбивки на страницы для категорий?

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

#reactjs #graphql #prisma #prisma-graphql

#reactjs #graphql #prisma #prisma-graphql

Вопрос:

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

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

product datamodel:

 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. Можете ли вы показать PAGINATION_QUERY, который вы используете?

2. Проверьте это, я уже предоставил PAGINATION_QUERY в верхней части компонента разбивки на страницы выше @Errorname

3. О, да, извините, я пропустил это

Ответ №1:

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

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

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