facebook / facebook/relay

[BUG] bi-directional is not working since data.pageInfo.hasPreviousPage does not match server response, usePaginationFragment() is returning stale data

Open
#4,058 4 comments 0 reactions 0 assignees View on GitHub
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

![image](https://user-images.githubusercontent.com/18282328/188762482-9dc08899-bd44-402a-8a76-148ad0c7ce65.png)

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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.