Search Not Paginating in Demo Store

[jadamconnor]

What is the location of your example repository?

No response

What version of Hydrogen are you using?

2023.1.5

What version of Remix are you using?

No response

Steps to Reproduce

Visit Hydrogen demo store, search, and attempt to load more results by clicking "Load more" button.

Expected Behavior

The page should show the next page of GraphQL results.

Actual Behavior

The page displays an error related to the shape of the ProductGrid component's collection prop.

ProductGrid accepts a collection object prop, but the search page passes it a products object, which isn't necessarily of the same shape. Working around this is easy enough but reveals a two more issues.

First, if the path passed to the fetcher in ProductGrid includes the index route param, then the q param is passed along with the index param like so: "snowboards?index", so we have to remove ?index from the path passed to fetcher.

This reveals a new issue: the "Load more" button simply fetches the same page over and over. This is resolved by changing the cursor variable passed to the storefront query in the search page's loader to after: cursor, but I'm not sure why.

In short, the fix is:

1. Either create a component specifically for displaying search results or alter ProductGrid to be more generic.
2. To edit the variables passed to the loader query in search. The offending code for this is here.

[jadamconnor]

I'd love to know why we must assign the endCursor as a key value pair, rather than just passing the variable. Have we uncovered a bug with the storefront API here?

[blittle]

Hi @jadamconnor, thank you for reporting this issue! We are planning to build a packaged pagination abstraction very soon. This should be resolved when that releases.

[gmisa]

In my case, after clicking Load More, the loader returns zero product nodes even though there are more. The cause was an invalid url as pointed out by @jadamconnor where there was a double '?' in it. A quick fix was to add these checks in ProductGrid.tsx. Also included is the check whether data is a products or collections object.

  const {search} = useLocation() as {
    search: string;
  };

  function fetchMoreProducts() {
    //check if url has existing querystring
    search
      ? fetcher.load(`${url}&index&cursor=${endCursor}`)
      : fetcher.load(`${url}?index&cursor=${endCursor}`);
  }

  useEffect(() => {
    if (!fetcher.data) return;

    const {collection, products} = fetcher.data;

    const productCollection = products ? products : collection.products;
    if (productCollection) {
      setProducts((prev: Product[]) => [...prev, ...productCollection.nodes]);
      setNextPage(productCollection?.pageInfo?.hasNextPage);
      setEndCursor(productCollection?.pageInfo?.endCursor);
   }
  }, [fetcher.data]);