facebook / facebook/relay

ReactRelayRefetchContainer refetch callback disposed

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

Description

I set up loading overlay before `refetch` call and remove it in `callback`:
```js
this.setState({ loading: true });
this.props.relay.refetch(null, null, (error) => {
this.setState({ loading: false });
});
```
In some cases `callback` is never called although component receives new props.
I belive it happens when there are new data entries after fetch.
During [this check](https://github.com/facebook/relay/blob/master/packages/react-relay/modern/ReactRelayRefetchContainer.js#L174):
```js
static getDerivedStateFromProps(
...
if (
prevState.relayEnvironment !== relay.environment ||
prevState.relayVariables !== relay.variables ||
!areEqual(prevIDs, nextIDs)
) { ... }
}
```
component gets new resolver and [disposes callback here](https://github.com/facebook/relay/blob/master/packages/react-relay/modern/ReactRelayRefetchContainer.js#L135):

```js
componentDidUpdate(prevProps: ContainerProps, prevState: ContainerState) {
if (this.state.resolver !== prevState.resolver) {
prevState.resolver.dispose();
this._queryFetcher && this._queryFetcher.dispose();
this._refetchSubscription && this._refetchSubscription.unsubscribe();
this._subscribeToNewResolver();
}
}
```
So, there is no guarantee that callback would be called after each refetch?
I use React Modern with Found-Relay

Contributor guide

Open the contributing guide

Research direction

Start in packages/react-relay/modern/ReactRelayRefetchContainer.js, especially getDerivedStateFromProps and componentDidUpdate. Reproduce a refetch that receives new data entries, then trace disposal of the resolver, query fetcher, and refetch subscription. Done means the callback behavior is defined and covered for this case without leaving the loading overlay active.

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.