[BUG] bi-directional is not working since data.pageInfo.hasPreviousPage does not match server response, usePaginationFragment() is returning stale data
- Dominant language
- Rust
- Stars
- 19k
- Forks
- 1.9k
- PR merge metrics
- No merged PRs in 30d
Description
## version
"react-relay": "^14.1.0",
"relay-runtime": "^14.1.0",
## connection query
```graphql
fragment TaskListTenant on Query
@argumentDefinitions(
first: { type: "Int" }
after: { type: "Cursor" }
last: { type: "Int" }
before: { type: "Cursor" }
currentTenantId: { type: "ID!" }
)
@refetchable(queryName: "TaskListTenantPaginationQuery") {
tasks(
first: $first
after: $after
last: $last
before: $before
where: { tenantID: $currentTenantId }
) @connection(key: "TaskList_tenant_tasks") {
edges {
node {
...TaskListItem
}
}
pageInfo {
hasNextPage
hasPreviousPage
}
totalCount
}
}
```
## code
> start with first:1, all other field null
```typescript
export function TaskList({ tenant }: TaskListProps) {
const { first, last } = useBacklog.use.pagination()
const {
data,
hasNext,
hasPrevious,
loadNext,
loadPrevious,
isLoadingNext,
isLoadingPrevious,
} = usePaginationFragment(
QUERY,
tenant,
)
console.log(
hasPrevious,
data.tasks.pageInfo.hasPreviousPage,
data.tasks.edges?.length,
)
return (
{!!data.tasks.pageInfo.hasPreviousPage && (
loadPrevious(first)}
>
Previous
)}
{hasNext && (
loadNext(first)}>
Next
)}
)
}
```
## Expectation
Let's say there are 5 items, with a filter like {first:1}
1. Load the 1st page with 1 item,
- `` button should be hidden since no previous data to fetch
- `` button should be enabled since totalCount is greater than 1
1. clicking the button should display the 2nd page with the 1st item gone and 2nd item being displayed
1. until 5 get to the last page, the `` button should be hidden and only `` is displayed
## UI behaviour
press "next" button loads 1 more item onto the page, until hits the end,
which means, it behaves like an infinite scrolling where the new data is being added to the current cache,
so after clicking the `` button, instead of showing the 2nd item alone, 2 items will be displayed on the page.
and next button hides itself since hasNext becomes false (which is correct),
however, hasPrevious is ALWAYS false which prevent `` button to be displayed
## server response

As in the image, after pressing the Next button 1 time, the server is returning correct data, the `hasPreviousPage` value is true, however Relay mutates the data to be in a wrong value.
- the `data.tasks.pageInfo.hasPreviousPage` is ALWAYS false
- the `hasPrevious` value from the `usePaginationFragment()` is ALWAYS false
## Behaviour
Bi-directional pagination is not working, since relay always add new entry on top of exist cache. So it behaves like a infinite-scroll case, `hasNext` and `loadNext()` works fine while `hasPrevious` and `loadPrevious()` is not working at all.
The data.pageInof.hasPreviousPage is also not respecting server response.
## Question
The current doc states:
> This api supports simultaneous bi-directional pagination out of the box.
https://relay.dev/docs/api-reference/use-pagination-fragment/#differences-with-paginationcontainer
However, the runtime behaviour is completely oppsite,
also, I can not find any bi-directional example in the example repo: https://github.com/relayjs/relay-examples
I am missing something here? thanks :)
Contributor guide
Assessment
This issue has not been assessed yet.