Skip to content

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

Open
@ellyjonez

Description

@ellyjonez

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!

Metadata

Metadata

Assignees

No one assigned

    Labels

    questionQuestion asked by a usertriageA new issue that needs triage

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions