有没有办法在不为类别制作不同的分页组件的情况下根据特定类别对产品进行计数?

Posted

技术标签:

【中文标题】有没有办法在不为类别制作不同的分页组件的情况下根据特定类别对产品进行计数?【英文标题】:Is there a way to count the products according to a specific category without making different pagination components for the categories? 【发布时间】:2019-09-03 20:58:10 【问题描述】:

我想使用产品类型为我的分页组件计算产品,但现在我想根据字段类别对产品进行分类,然后为我的分页组件计算该类别的产品。

我可以创建不同的分页文件,因为我只有两个类别我想根据它们进行排序和计数,但是有没有办法避免它?

产品数据模型:

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
        
    
`

【问题讨论】:

你能显示你使用的PAGINATION_QUERY吗? 检查一下,我已经在@Errorname上方的分页组件顶部提供了PAGINATION_QUERY 哦,对不起,我错过了 【参考方案1】:

您可以在连接查询中过滤您的产品:

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

这将只计算具有上述类别的产品。然后,在您的产品查询中,您也可以按相同的类别进行过滤。

【讨论】:

以上是关于有没有办法在不为类别制作不同的分页组件的情况下根据特定类别对产品进行计数?的主要内容,如果未能解决你的问题,请参考以下文章

有没有办法在不刷新页面的情况下更改浏览器的地址栏?

链接 2 UIScrollView 与不同的分页大小

有没有办法在不覆盖现有类名的情况下将类名添加到 blazor 组件?

MyBatis使用MyBatis的分页组件PageHelper时,多表关联下使用别名查询时,前台传参过来,根据参数排序的解决方案

有没有办法在不使用 ImageMagick 或其他第三方软件的情况下在 R 中制作 GIF?

mybatis下的分页,支持所有的数据库