How to implement cursor-based infinite scrolling with prisma + useInfinitequery

How to implement cursor based infinite scrolling in this scenario? Imagine I have this schema:

model MockUser {
  id         String   @id @default(cuid())
  name       String?
  hourlyRate Decimal?
  rating     Decimal?
}

model MockUser {
  id         String   @id @default(cuid())
  name       String?
  hourlyRate Decimal?
  rating     Decimal?
}

I want users to have random ID's for other purposes. Cursor based infinite scrolling requires a sequential and unique id of some sort in table. What is the best way to go about this? It feels a bit weird to add an extra column for that, but I seen no other way. For example:

model MockUser {
  id         String   @id @default(cuid())
  name       String?
  hourlyRate Decimal?
  rating     Decimal?
  myCursor   Int    @id @default(autoincrement())
}

model MockUser {
  id         String   @id @default(cuid())
  name       String?
  hourlyRate Decimal?
  rating     Decimal?
  myCursor   Int    @id @default(autoincrement())
}

Only one id can be used though, so what should I do here? Possible solution?

model MockData {
  id           String        @id @default(cuid())
  name         String?
  hourlyRate   Decimal?
  rating       Decimal?
  MockDataList MockDataList?
}

model MockDataList {
  id         Int      @id @default(autoincrement())
  mockDataId String   @unique
  mockData   MockData @relation(fields: [mockDataId], references: [id])

  @@index([mockDataId])
}

model MockData {
  id           String        @id @default(cuid())
  name         String?
  hourlyRate   Decimal?
  rating       Decimal?
  MockDataList MockDataList?
}

model MockDataList {
  id         Int      @id @default(autoincrement())
  mockDataId String   @unique
  mockData   MockData @relation(fields: [mockDataId], references: [id])

  @@index([mockDataId])
}

35 Replies

cje•2y ago

Read the tRPC useinfinotequery docs

amanuel•2y ago

I already read this: https://trpc.io/docs/useInfiniteQuery

useInfiniteQuery | tRPC

- Your procedure needs to accept a cursor input of any type

amanuel•2y ago

And this: https://www.prisma.io/docs/concepts/components/prisma-client/pagination#cursor-based-pagination

Prisma

Pagination (Reference)

Prisma Client supports both offset pagination and cursor-based pagination. Learn more about the pros and cons of different pagination approaches and how to implement them.

amanuel•2y ago

And I searched a lot, but I think the last schema I arrived at is sufficient for now, until someone suggests a better strategy

cje•2y ago

The tRPC page you linked shows how to do it without a cursor field

amanuel•2y ago

No, the schema needs a cursor field, how else will you reference the next section, hahahaha

amanuel•2y ago

amanuel•2y ago

In this scenario they use {myCursor: cursor}

cje•2y ago

Read the code snippet again and look at where they get the cursor from

amanuel•2y ago

~~You clearly don't understand how cursor based infinite scrolling works hahaha~~ What do you think the cursor does in prisma? It needs to reference an autoincremented unique primary key

cje•2y ago

myCursor is just an arbitrary field like id

amanuel•2y ago

Even in prisma docs it says:

cje•2y ago

guess what field meets those requirements Id

amanuel•2y ago

Yes, but I don't want my id to be sequential That's the whole point

cje•2y ago

It works with uuid also

Gaming

Programming

How to implement cursor-based infinite scrolling with prisma + useInfinitequery