Pagination component should allow navigation in nested routes

[lorenzo-del-rosario]

I'm trying to create a products list page (collections/all) with Hydrogen Pagination component and infinite scroll.
On click on a product it should navigate to (collections/all/:productID) and open a Dialog within an Outlet.

If I scroll enough to request a second page the default behaviour of the Pagination components resets the state on path changes, triggering a set of calls to retrieve previous pages content.

bc32f248-9788-4acc-b214-1b1bbf90bb1b.mp4

This is how it behaves if I comment out the navigate in this useEffect.

dfgdfg.mp4

[jamalsoueidan]

We need to see code :)

[lorenzo-del-rosario]

Here is a minimum reproducible example.

The dialog is a MUI Dialog

collections/all page

import {
  MetaFunction,
  Outlet,
  useLoaderData,
  useLocation,
  useNavigate,
} from '@remix-run/react';
import {getPaginationVariables, Pagination} from '@shopify/hydrogen';
import {json, type LoaderFunctionArgs} from '@shopify/remix-oxygen';

import {InfiniteScroll} from '~/components/organisms/InfiniteScroll';
import {ensureAuth} from '~/lib/auth';
import {getBlockRouteAccess} from '~/lib/checkRouteAccess';
import {Queries} from '~/lib/utils';

export async function loader({request, context}: LoaderFunctionArgs) {
  const shouldBlockRouteAccess = getBlockRouteAccess({context});
  if (shouldBlockRouteAccess) {
    return shouldBlockRouteAccess;
  }
  await ensureAuth({context});

  const getRecommendedProducts = new Queries(context).getQuery(
    'getRecommendedProducts',
  );

  const paginationVariables = getPaginationVariables(request, {pageBy: 20});

  const productsResponse = await getRecommendedProducts({
    ...paginationVariables,
  });

  return json({
    products: productsResponse?.products,
  });
}

export const meta: MetaFunction<typeof loader> = () => {
  return [{title: 'Products'}];
};

export default function ProductsPage() {
  const {products} = useLoaderData<typeof loader>();

  const {search} = useLocation();
  const navigate = useNavigate();

  return (
    <>
      <Pagination connection={products} key={search}>
        {({
          nodes,
          nextPageUrl,
          hasNextPage,
          hasPreviousPage,
          previousPageUrl,
          state,
          isLoading,
        }) => (
          <InfiniteScroll
            hasNextPage={hasNextPage}
            nextPageUrl={nextPageUrl}
            hasPreviousPage={hasPreviousPage}
            previousPageUrl={previousPageUrl}
            state={state}
            isLoading={isLoading}
          >
            {({
              bottomElementRef,
              showBottomLoading,
              showTopLoading,
              topElementRef,
            }) => (
              <>
                <div ref={topElementRef}>
                  {showTopLoading && 'Loading previous'}
                </div>
                {nodes.map((node) => (
                  <div key={node.id} style={{padding: '30px'}}>
                    {node.id}
                    <button
                      onClick={() =>
                        navigate(node.id.split('/').pop() ?? '', {
                          replace: true,
                          preventScrollReset: true,
                          state,
                        })
                      }
                    >
                      Open details
                    </button>
                  </div>
                ))}
                <div ref={bottomElementRef}>
                  {showBottomLoading && 'Loading previous'}
                </div>
              </>
            )}
          </InfiniteScroll>
        )}
      </Pagination>
      <Outlet />
    </>
  );
}

collections/all/:id page

import {useEffect, useState} from 'react';
import {Dialog} from '@mui/material';
import {useLoaderData, useLocation, useNavigate} from '@remix-run/react';
import {json, type LoaderFunctionArgs} from '@shopify/remix-oxygen';

export async function loader(_args: LoaderFunctionArgs) {
  const productDetails = {
    name: 'foo',
  };
  return json(productDetails);
}

export default function ProductsPage() {
  const {name} = useLoaderData<typeof loader>();

  const [isOpen, setIsOpen] = useState(true);

  const navigate = useNavigate();
  const {search, state} = useLocation();

  useEffect(() => {
    if (!isOpen) {
      navigate(
        {
          pathname: '..',
          search,
        },
        {
          preventScrollReset: true,
          replace: true,
          state,
        },
      );
    }
  }, [isOpen, navigate, search, state]);

  return (
    <Dialog open={isOpen} onClose={() => setIsOpen(false)}>
      <h1>{name}</h1>
    </Dialog>
  );
}

InfiniteScroll Component

import {type FC, type ReactElement, useEffect} from 'react';
import {useInView} from 'react-intersection-observer';
import {NavigateOptions} from 'react-router-dom';
import {useNavigate} from '@remix-run/react';
import {Maybe} from '@shopify/hydrogen/customer-account-api-types';

type InfiniteScrollProps = {
  hasNextPage: boolean;
  nextPageUrl: string;
  hasPreviousPage: boolean;
  previousPageUrl: string;
  isLoading: boolean;
  state?: {
    pageInfo: {
      endCursor: Maybe<string> | undefined;
      startCursor: Maybe<string> | undefined;
      hasPreviousPage: boolean;
    };
  };
  children: (props: {
    topElementRef: (node?: Element | null | undefined) => void;
    bottomElementRef: (node?: Element | null | undefined) => void;
    showTopLoading: boolean;
    showBottomLoading: boolean;
  }) => ReactElement;
};

export const InfiniteScroll: FC<InfiniteScrollProps> = ({
  hasNextPage,
  nextPageUrl,
  hasPreviousPage,
  previousPageUrl,
  children,
  isLoading,
  state,
}) => {
  const navigate = useNavigate();
  const {ref: bottomElementRef, inView: inEndingElementView} = useInView();
  const {ref: topElementRef, inView: inStartingElementView} = useInView();

  useEffect(() => {
    const navigationOptions: NavigateOptions = {
      replace: true,
      preventScrollReset: true,
      state,
    };

    if (inEndingElementView && hasNextPage) {
      navigate(nextPageUrl, navigationOptions);
    } else if (inStartingElementView && hasPreviousPage) {
      navigate(previousPageUrl, navigationOptions);
    }
  }, [
    inEndingElementView,
    nextPageUrl,
    hasNextPage,
    inStartingElementView,
    navigate,
    previousPageUrl,
    hasPreviousPage,
    state,
  ]);

  const childProps = {
    topElementRef,
    bottomElementRef,
    showTopLoading: isLoading && inStartingElementView && hasPreviousPage,
    showBottomLoading: isLoading && inEndingElementView && hasNextPage,
  };

  return children(childProps);
};

I've also noticed this error in the console whenever I navigate to the collections/all/:id route

Encountered two children with the same key, gid://shopify/Product/8547330359588. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

[jamalsoueidan]

We need to change the way you open the dialog:

Use this hook in the parent root component to figure out if outlet have data or not.

const inOutlet = !!useOutlet();

and instead of

<Outlet>

Do this:

<Dialog open={inOutlet} onClose={() => navigate(-1)}>
    <Outlet />
</Dialog>

This way collections/all/:id page becomes

export default function ProductsPage() {
  const {name} = useLoaderData<typeof loader>();

  return (
      <h1>{name}</h1>
  );
}

[jamalsoueidan]

Insert this code in the parent, so parent loader only refresh, in case cursor is changed, so even if you open the dialog, it will not refresh the products data.

export function shouldRevalidate({ currentUrl, nextUrl }) {
  return currentUrl.searchParams.get('cursor') !== nextUrl.searchParams.get('cursor');
}

[lorenzo-del-rosario]

Changing the Dialog placement fixed the duplicate items console error.
Unluckily with the suggested changes it still updates the products list because the Pagination component resets pagination params sets nextUrl.searchParams.get('cursor') to null and deletes all previously fetched products from the router state.

useEffect(() => {
    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: undefined, pageInfo: undefined},
      });
    }
  }, [pathname, search]);