Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
ellyjonez opened this issue May 2, 2024 · 1 comment
Labels
question Question asked by a user triage A new issue that needs triage

Comments

@ellyjonez
Copy link

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 ellyjonez added question Question asked by a user triage A new issue that needs triage labels May 2, 2024
@Danishkhurshid
Copy link

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question Question asked by a user triage A new issue that needs triage
Projects
None yet
Development

No branches or pull requests

2 participants