-
Notifications
You must be signed in to change notification settings - Fork 1.9k
Description
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
beforeorlastarguments 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! 🙏