bigcommerce / storefront-data-hooks

Hooks for React Storefront UI Components
MIT License
166 stars 36 forks source link

Pagination #38

Closed avisra closed 3 years ago

avisra commented 3 years ago

Hello,

Similar to the Vercel Commerce demo - I am using the useSearch hook for my main product listing (keywords, category, sorting, etc). However - this appears to only return back 12 items - and contains no pagination data. For example, I'd like to know how many total items matched the query (even if only 12 came back) - and I'd like to provide a next/previous link which can return back the next 12 items.

I've reviewed the hooks a bit. I see a "pageInfo" object on the ProductConnectionFragment but don't see why it isn't coming back.

avisra commented 3 years ago

I've been reviewing this further, and I think I found something a bit.. strange.

First, the query itself appears to be happening in the getProducts method in bigcommerce/api/catalog/handlers/get-products.ts

Here it appears to execute a search query against the V3 (not graphql) APIs. These APIs return back the product data (and pagination info in the meta object, which is ignored here). And then you are passing the IDs from this first API call into the graphQL apis.

  1. I understand the desire to work with GraphQL everywhere... but isn't this additional call to GraphQL an unnecessary performance overhead? I imagine having the performance boost and the pagination data would outweigh the desire for consistency with the GraphQL models.

  2. The valuable meta info which contains paging data is being ignored and lost here.

If the V3 API is needed for proper search - may I suggest we modify this useSearch hook to not have the secondary call to GraphQL? And we return the data and meta object here:

const { data, meta } = await config.storeApiFetch<{ data: { id: number }[] }>( url.pathname + url.search )

jorgemasta commented 3 years ago

We use GraphQL as much as possible and allow us to unify the code and types. We are querying again the V3 API because we can't filter by categories with the GraphQL API (GraphQL's team is already taking this into account)

I like your suggestion of return the meta object and looks a good enhancement until we can do pagination with GraphQL 👍