Log an error for duplicate namespaces

Shopify · Nov 21, 2024 · 0ba0725 · 0ba0725
1 parent 4cfab7e
commit 0ba0725
Showing 1 changed file with 15 additions and 1 deletion.
diff --git a/packages/hydrogen/src/pagination/Pagination.ts b/packages/hydrogen/src/pagination/Pagination.ts
@@ -111,6 +111,8 @@ export function Pagination<NodesType>({
 }: PaginationProps<NodesType>): ReturnType<FC> {
   const transition = useNavigation();
   const isLoading = transition.state === 'loading';
+  const location = useLocation();
+
   const {
     endCursor,
     hasNextPage,
@@ -120,7 +122,19 @@ export function Pagination<NodesType>({
     previousPageUrl,
     startCursor,
   } = usePagination<NodesType>(connection, namespace);
-  const location = useLocation();
+
+  // Throw error for duplicate namespace
+  if (
+    location.state?.pagination &&
+    namespace in location.state.pagination &&
+    transition.state === 'idle'
+  ) {
+    console.warn(
+      `Warning: Multiple <Pagination /> components are using the same namespace${
+        namespace ? `"${namespace}"` : ''
+      }. This will cause state conflicts. Each <Pagination /> component should have a unique namespace.`,
+    );
+  }
 
   const state = useMemo(
     () => ({