next-drupal icon indicating copy to clipboard operation
next-drupal copied to clipboard

Looking for advice on creating paginated front end term pages with mixed-bundle content

Open ellyjonez opened this issue 1 year ago • 1 comments

Package

Not package-specific

Ask the question

next-drupal 1.6.0 / Drupal 10.2.5 / next-2.0.0-alpha1

Hey folks, I'm looking for advice on the best practice for creating paginated lists of mixed bundle content in the term pages that are generated via [slug].tsx.

I am using getView() in [slug].tsx get a view of nodes from different content types tagged with that term/resource. the problem is, I need to add a pager. I have been able to count the pages in the result and create a pager, but I can't figure out how to generate paths for say term/topic-name/1 term/topic-name/2 in getStaticPaths. And I'm not sure that is even the right approach.

I have this in my [slug].tsx in getStaticProps

  if (["taxonomy_term--topics"].includes(resource.type)) {

    // Get the term id
    const termId = resource.drupal_internal__tid;

    // Load the term content view
    const termContentView = await getView(
      "taxonomy_term--page",
      {
        params: {
          'views-argument[]': termId,
          page: currentPage, // currently currentPage is hardcoded to 0
        },
        deserialize: false,
      }
    );
    
    // Get the term content from results
    termContent = termContentView.results as DrupalNode[];

    // Get the result count for a pager
    termCount = termContent.meta.count;

    // calculate the number of pages for the pager
    totalPages = Math.ceil(termCount / NUMBER_OF_POSTS_PER_PAGE);

then I pass these props

page : {
        current: currentPage,
        total: totalPages
      }

to a TaxonomyTerm component, where I embed a pager like this

        {page ? (
          <Pager
            current={page.current}
            total={page.total}
                href={(page) => (page === 0 ? `${term.path.alias}` : `${term.path.alias}/${page}`)}
          />
        ) : null}

my plan was then to generate the sub-pages for each page ${term.path.alias}/${page} in getStaticPaths in the [slug].tsx but I'm not sure this is the best plan or how to go about this. Any advice? or is there a better way to handle this use case? I'm essentially trying to recreate the behavior of Drupal's paged term pages in my next-drupal front end.

Thanks in advance for any help!

ellyjonez avatar May 02 '24 22:05 ellyjonez

@ellyjonez i don't think what you're attempting is possible with getStaticPaths, because it lacks the context needed to generate the necessary pages. It's rather basic and doesn't account for the number of pages required. I'd suggest either generating the paginated pages server-side or using client-side hydration with query params.

Danishkhurshid avatar May 04 '24 13:05 Danishkhurshid