diff --git a/packages/hydrogen/src/pagination/Pagination.ts b/packages/hydrogen/src/pagination/Pagination.ts index 252547a9a..a3cd8e237 100644 --- a/packages/hydrogen/src/pagination/Pagination.ts +++ b/packages/hydrogen/src/pagination/Pagination.ts @@ -111,6 +111,8 @@ export function Pagination({ }: PaginationProps): ReturnType { const transition = useNavigation(); const isLoading = transition.state === 'loading'; + const location = useLocation(); + const { endCursor, hasNextPage, @@ -120,7 +122,19 @@ export function Pagination({ previousPageUrl, startCursor, } = usePagination(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 components are using the same namespace${ + namespace ? `"${namespace}"` : '' + }. This will cause state conflicts. Each component should have a unique namespace.`, + ); + } const state = useMemo( () => ({