Infinite scroll with cursor based pagination in a Next.js app

[m-abdelwahab]

I'm working on a demo using Next.js, next-auth, Prisma, Nexus, Apollo, and Urql. I'm trying to implement infinite scroll and I'm having a hard time doing it.

I checked out the docs of Relay pagination and I think I have a relay compatible schema.

### /graphql/schema.graphql
### This file was generated by Nexus Schema
### Do not make changes to this file directly


type Link {
  category: String
  description: String
  id: String
  imageUrl: String
  index: Int
  title: String
  url: String
  userId: Int
}

type Mutation {
  createLink(category: String!, description: String!, imageUrl: String!, title: String!, url: String!): Link!
  deleteLink(id: Int!): Link!
  updateLink(category: String, description: String, id: Int, imageUrl: String, title: String, url: String): Link!
}

type Query {
  link(id: String!): Link!
  links(cursor: String, limit: Int, skip: Int): response
  user(id: Int!): User!
  users: [User]!
}

enum Role {
  ADMIN
  USER
}

type User {
  email: String
  favorites: [Link]
  id: Int
  image: String
  name: String
  role: Role
}

type edges {
  cursor: String
  node: Link
}

type pageInfo {
  endCursor: String
  hasNextPage: Boolean
}

type response {
  edges: [edges]
  pageInfo: pageInfo
}

I have a working example and it's just missing the infinite scroll part in the index.tsx page. https://github.com/m-abdelwahab/epic-links. The resolver responsible for cursor-based pagination is in /graphql/types/Link.ts

To set up the project locally you'll need to have a database, you can use Heroku or a local Postgres DB

You'll also need to have a GitHub app for auth, so just create a new Oauth app and make the authorization callback URL: http://localhost:3000/api/auth

[kitten]

This looks almost Relay-compatible to me. The cursor argument must be named after and it should work just fine ✌️

I'd also recommend keeping all type names as pascal case, eg PageInfo, this is defined as a convention in Relay's spec, and it will also prevent misfiring warnings from Graphcache