@shopify/hydrogen 2023.7.4 → 2023.7.6

package/dist/development/index.cjs

@@ -427,7 +427,7 @@ var warnOnce = (string) => {
 };
 
 // src/version.ts
-var LIB_VERSION = "2023.7.4";
+var LIB_VERSION = "2023.7.6";
 
 // src/storefront.ts
 var StorefrontApiError = class extends Error {
@@ -1368,8 +1368,35 @@ function Pagination({
     PreviousLink
   });
 }
+function getParamsWithoutPagination(paramsString) {
+  const params = new URLSearchParams(paramsString);
+  params.delete("cursor");
+  params.delete("direction");
+  return params.toString();
+}
+function makeError(prop) {
+  throw new Error(
+    `The Pagination component requires ${"`" + prop + "`"} to be a part of your query. See the guide on how to setup your query to include ${"`" + prop + "`"}: https://shopify.dev/docs/custom-storefronts/hydrogen/data-fetching/pagination#setup-the-paginated-query`
+  );
+}
 function usePagination(connection) {
-  const { state, search } = react$1.useLocation();
+  if (!connection.pageInfo) {
+    makeError("pageInfo");
+  }
+  if (typeof connection.pageInfo.startCursor === "undefined") {
+    makeError("pageInfo.startCursor");
+  }
+  if (typeof connection.pageInfo.endCursor === "undefined") {
+    makeError("pageInfo.endCursor");
+  }
+  if (typeof connection.pageInfo.hasNextPage === "undefined") {
+    makeError("pageInfo.hasNextPage");
+  }
+  if (typeof connection.pageInfo.hasPreviousPage === "undefined") {
+    makeError("pageInfo.hasPreviousPage");
+  }
+  const navigate = react$1.useNavigate();
+  const { state, search, pathname } = react$1.useLocation();
   const params = new URLSearchParams(search);
   const direction = params.get("direction");
   const isPrevious = direction === "previous";
@@ -1380,18 +1407,34 @@ function usePagination(connection) {
     hasPreviousPage: connection.pageInfo.hasPreviousPage,
     hasNextPage: connection.pageInfo.hasNextPage
   });
+  const urlRef = react.useRef({
+    params: getParamsWithoutPagination(search),
+    pathname
+  });
   react.useEffect(() => {
-    if (state?.nodes) {
+    if (
+      // If the URL changes (independent of pagination params)
+      // then reset the pagination params in the URL
+      getParamsWithoutPagination(search) !== urlRef.current.params || pathname !== urlRef.current.pathname
+    ) {
+      urlRef.current = {
+        pathname,
+        params: getParamsWithoutPagination(search)
+      };
+      navigate(`${pathname}?${getParamsWithoutPagination(search)}`, {
+        replace: true,
+        preventScrollReset: true,
+        state: { nodes: void 0, pageInfo: void 0 }
+      });
+    } else if (state?.nodes) {
       setNodes(
         isPrevious ? [...hydrogenReact.flattenConnection(connection), ...state.nodes] : [...state.nodes, ...hydrogenReact.flattenConnection(connection)]
       );
-    }
-    if (state?.pageInfo) {
-      let pageStartCursor = state?.pageInfo?.startCursor === void 0 ? connection.pageInfo.startCursor : state.pageInfo.startCursor;
-      let pageEndCursor = state?.pageInfo?.endCursor === void 0 ? connection.pageInfo.endCursor : state.pageInfo.endCursor;
-      let previousPageExists = state?.pageInfo?.hasPreviousPage === void 0 ? connection.pageInfo.hasPreviousPage : state.pageInfo.hasPreviousPage;
-      let nextPageExists = state?.pageInfo?.hasNextPage === void 0 ? connection.pageInfo.hasNextPage : state.pageInfo.hasNextPage;
-      if (state?.nodes) {
+      if (state?.pageInfo) {
+        let pageStartCursor = state?.pageInfo?.startCursor === void 0 ? connection.pageInfo.startCursor : state.pageInfo.startCursor;
+        let pageEndCursor = state?.pageInfo?.endCursor === void 0 ? connection.pageInfo.endCursor : state.pageInfo.endCursor;
+        let previousPageExists = state?.pageInfo?.hasPreviousPage === void 0 ? connection.pageInfo.hasPreviousPage : state.pageInfo.hasPreviousPage;
+        let nextPageExists = state?.pageInfo?.hasNextPage === void 0 ? connection.pageInfo.hasNextPage : state.pageInfo.hasNextPage;
         if (isPrevious) {
           pageStartCursor = connection.pageInfo.startCursor;
           previousPageExists = connection.pageInfo.hasPreviousPage;
@@ -1399,15 +1442,23 @@ function usePagination(connection) {
           pageEndCursor = connection.pageInfo.endCursor;
           nextPageExists = connection.pageInfo.hasNextPage;
         }
+        setCurrentPageInfo({
+          startCursor: pageStartCursor,
+          endCursor: pageEndCursor,
+          hasPreviousPage: previousPageExists,
+          hasNextPage: nextPageExists
+        });
       }
+    } else {
+      setNodes(hydrogenReact.flattenConnection(connection));
       setCurrentPageInfo({
-        startCursor: pageStartCursor,
-        endCursor: pageEndCursor,
-        hasPreviousPage: previousPageExists,
-        hasNextPage: nextPageExists
+        startCursor: connection.pageInfo.startCursor,
+        endCursor: connection.pageInfo.endCursor,
+        hasPreviousPage: connection.pageInfo.hasPreviousPage,
+        hasNextPage: connection.pageInfo.hasNextPage
       });
     }
-  }, [state, connection]);
+  }, [state, connection, isPrevious, search, navigate, pathname]);
   const previousPageUrl = react.useMemo(() => {
     const params2 = new URLSearchParams(search);
     params2.set("direction", "previous");