Question

我想为用于产品类型的分页组件计数产品，但是现在我想根据字段类别对产品进行排序，然后为我的分页组件计数该类别的产品。

我可以创建不同的分页文件，因为我只有两个要分类和计数的类别，但是有办法避免这种情况吗？

产品数据模型：

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

Answer 1

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

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

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

有没有一种方法可以根据特定类别对产品进行计数，而无需为类别创建不同的分页组件？

1 个答案: