please i need resource recommendation for pagination on trpc the official docs is very confusing

Please any recommendations will be much appreciated be it video or blog post or code snippet etc

21 Replies

Neto•2y ago

https://github.com/STNeto1/jobs/blob/main/src/server/trpc/inputs/pagination.ts https://github.com/STNeto1/jobs/blob/main/src/server/trpc/router/technology.ts#L23-L38

Lopen•2y ago

const handlePagination = async (page: number) => {
    await push(`/dashboard/company?page=${page}`)
  }

const handlePagination = async (page: number) => {
    await push(`/dashboard/company?page=${page}`)
  }

can't i do pagination without the url changing? like implementing infinite scroll

Neto•2y ago

you can the handlepagination on that was just my lazy way of doing that

Lopen•2y ago

Neto•2y ago

https://tanstack.com/query/v4/docs/guides/infinite-queries

Infinite Queries | TanStack Query Docs

Rendering lists that can additively "load more" data onto an existing set of data or "infinite scroll" is also a very common UI pattern. React Query supports a useful version of useQuery called useInfiniteQuery for querying these types of lists. When using useInfiniteQuery, you'll notice a few things are different:

Lopen•2y ago

thanks lastly

const data = await ctx.prisma.technology.findMany({
        skip: (input.page - 1) * input.limit,
        take: input.limit
      })

const data = await ctx.prisma.technology.findMany({
        skip: (input.page - 1) * input.limit,
        take: input.limit
      })

the skip and take are the what confused me in the offical doc not the init pagination but the handling next page

Neto•2y ago

if you are on the first page

page = 1
limit = 10
skip = 10

page = 1
limit = 10
skip = 10

you would skip the first 10 rows

Lopen•2y ago

page and limit for init then skip for next page? so you will skip the previous pages you have before?

Neto•2y ago

Neto•2y ago

kind of with offset pagination you have that

Lopen•2y ago

why pagination1 and pagination2?

Neto•2y ago

two methods

Lopen•2y ago

cant have a single function?

Neto•2y ago

to show the difference between the page - 1

Lopen•2y ago

i am still lost thou

Neto•2y ago

let me make a better example

Lopen•2y ago

okay thanks

Neto•2y ago

Neto•2y ago

basically on the first page you do not want to skip the first N rows from the table

Lopen•2y ago

So basically i will need 2 functions for pagination on the client side? Because of handling the skip logic?

Neto•2y ago

no you just need one i was just showing about the page-1

Gaming

Programming

please i need resource recommendation for pagination on trpc the official docs is very confusing