Skip to content

Clarification on mixing after + before arguments and page-replacement pagination #5088

@radzserg

Description

@radzserg

Hey Relay team 👋

I’m experimenting with server-side pagination where I want to replace the current page instead of appending data (i.e., classic cursor-based pagination - not infinite scroll).

From my understanding, the GraphQL connection spec allows either after + first or before + last - but not both together.

So imagine I have a table where new data may appear, and I expect a cursor-based pagination model that lets the user navigate in both directions - forward and backward.
That means using after + first for forward pagination and before + last for backward pagination.

Here’s a simplified fragment example:

fragment TransactionsTable_transactions on Ledger
  @argumentDefinitions(
    # use these arguments when user wants to load next page
    first: { type: "Int" }
    after: { type: "String" }

    # use these arguments when user wants to load previous page
    before: { type: "String" }
    last: { type: "Int" }
  ) {
  transactions(after: $after, first: $first, filter: $filter) {
    edges {
      node {
        id
      }
    }
  }
}

Relay seems to drop one of the arguments depending on the pagination direction. That behavior makes sense, but it also causes fragment mismatches during SSR hydration - specifically, I get the warning:

The definition of 'TransactionsTable_transactions' appears to have changed

Data is loading and everything works - I'm just seeing this error in the console.

I’ve verified:

  • The generated text hashes are consistent.
  • The issue only appears once I add before or last arguments to the fragment (when first and after are specified)

I want to follow Relay-friendly patterns while keeping SSR stable and predictable for page-replacement pagination.

I could use useFragment or a custom query with a simpler pagination input, like:

input PaginationInput {
  cursor: String
  limit: Int!
  direction: PaginationDirection! # FORWARD | BACKWARD
}

letting the server handle both forward/backward directions explicitly.

Question

Is there a recommended way to support bidirectional “replace page” pagination using Relay connections - while staying compliant with the GraphQL spec?

Thanks a lot for your time and insights! 🙏

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions