Pagination on Custom types

Developing with Prismic
,
1

I'm trying to create pagination on custom types, trying to set limitations but I see that it limits not exactly my articles, here I add screenshots of my custom type and the data structure that I get from prismic

Screenshot 2023-11-17 at 11.33.46
Screenshot 2023-11-17 at 11.33.461966×1212 153 KB

Screenshot 2023-11-17 at 11.35.03
Screenshot 2023-11-17 at 11.35.031224×608 64 KB

and here you can see how I fetch data with prismic client
const res = await client.getAllByType('articles', {limit:2})

I do not really understand how to limit the count of articles from data

Thank you

3

Hi Jakub,

It sounds like the API option you want might be pageSize, rather than limit. To the best of my knowledge, we don't have a limit option.

See the pageSize option, here:

You could try this:

const res = await client.getAllByType('articles', {pageSize:2})

Let me know if that helps.
Sam

1 Like
5

If I may be so bold as to interject...

I believe the "get all" methods like getAllByType do not return a paginated list where the standard methods do like getByType. See an example I use for my blog index:
Documentation
I've included all but my structured data in case it helps:

import { Metadata } from 'next'
import { notFound } from 'next/navigation'
import { SliceZone } from '@prismicio/react'
import * as prismic from '@prismicio/client'
import { createClient } from '@/prismicio'
import { components } from '@/slices'
import { Graph } from 'schema-dts'
import Section from '@/components/Section'
import BlogCard from '@/components/BlogCard'
import Pagination from '@/components/Pagination'
export default async function Page({
  params,
  searchParams,
}: {
  params: Params
  searchParams: SearchParams
}) {
  const client = createClient()
  const pageNumber = Number(searchParams['page']) || 1
  const page = await client.getByUID('page', params.uid).catch(() => notFound())
  let posts
  if (page.uid === 'blog') {
    posts = await client.getByType('post', {
      orderings: {
        field: 'document.first_publication_date',
        direction: 'desc',
      },
      page: pageNumber,
      pageSize: 5,
    })
  }
  const settings = await client.getSingle('settings')
return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
      <SliceZone slices={page.data.slices} components={components} />
      {/* CODE FOR BLOG PAGE ONLY */}
      {page.uid === 'blog' && (
        <Section width="md">
          {posts && posts.results.length > 0 ? (
            <ul className="px-4 lg:px-0">
              {posts.results.map(post => {
                return (
                  <BlogCard
                    key={post.id}
                    post={post}
                    className="mx-auto max-w-xl"
                  />
                )
              })}
            </ul>
          ) : (
            <p className="prose mx-auto lg:prose-lg xl:prose-xl">
              No posts have been published yet. Please check back again soon!
            </p>
          )}
          {(posts?.next_page !== null || posts?.prev_page !== null) && (
            <Pagination
              hasNextPage={posts?.next_page !== null}
              hasPrevPage={posts?.prev_page !== null}
              totalPages={Number(posts?.total_pages)}
            />
          )}
        </Section>
      )}
      {/* END BLOG PAGE CODE */}
    </>
  )
}
1 Like
7

@nf_mastroianni You're completely correct! In this case, neither pageSize nor limit should have any effect whatsoever.

2 Likes
9

Hello
Just thought of this, is there a way i can implement something like an infinite loading of more post on click of a button, 10 posts is going to be added to the list when you load more post

Thanks

11

Hey Omopariola,

This is definitely possible! What stack are you using? I'll try to write up a minimal implementation for you.

Sam