facebook / facebook/relay

Relay returning too many connection edges from QueryRenderer

Open
#2,570 13 comments 0 reactions 0 assignees View on GitHub
wontfix
Dominant language
Rust
Stars
19k
Forks
1.9k
PR merge metrics
No merged PRs in 30d

Description

Hi there. I'm trying to build a windowed pagination component and I've discovered a regression(?) when upgrading from compat to modern.

Because Relay doesn't support windowed pagination natively, I implemented it using `QueryRenderer`s manually keeping track of the `endCursor`. This worked with a compat `QueryRenderer`, but once I upgraded to modern this stopped working as expected.

screen shot 2018-11-09 at 11 25 46 am

In this first screenshot you can see what the `QueryRenderer` is returning in terms of props. This is the first "page" after requesting the first 2 edges in the connection.

screen shot 2018-11-09 at 11 25 57 am

In this next screenshot you can see that we are requesting the next "page" which is the next 2 edges in the connection after the `endCursor` of the prev "page".

**What happened in compat**

We would receive props which only contained only the two new edges. This is exactly what we requested and what we want.

**What's happening in modern**

We are _actually_ receiving 4 edges. The 2 from the prev page and the 2 from the next page of results. This makes is so that instead of windowed pagination we are instead making it a infinitely growing list.

This doesn't seem like the correct behavior. I would expect that we would only get props related to the variables I gave the `QueryRenderer` not additional edges that wasn't part of the request / response from the server.

Contributor guide

Open the contributing guide

Research direction

Start with the QueryRenderer behavior described in the issue and reproduce the two-page windowed pagination flow using endCursor, comparing compat with modern. Inspect how the modern QueryRenderer handles connection edges across requests; done means the second request exposes only its two requested edges rather than retaining the previous page.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.