Performance issues on QueryRenderer
- Dominant language
- Rust
- Stars
- 19k
- Forks
- 1.9k
- PR merge metrics
- No merged PRs in 30d
Description
Hello,
I'm using the QueryRenderer to fetch a "large" array of items from our backend.
The backend responds with about 1500 filtered elements under 300ms (it's slow but we have to fetch a ton of data from different sources).
When the response enters Relay's parsing, it takes about 18 secondes to return.
Here is my current setup
`relayEnvironment.js`
```
import { Environment, Network, RecordSource, Store } from 'relay-runtime';
export const fetcher = new ClientFetcher(
backend.GRAPHQL_ENDPOINT,
nb => {
const { loading } = getStore().getState();
const newLoading = (nb > 0 && true) || false;
if (loading !== newLoading) {
getStore().dispatch(loadingAction(newLoading));
}
},
() => {
const state = getStore().getState();
return state.viewer.token;
},
// eslint-disable-next-line no-underscore-dangle
window.__RELAY_PAYLOADS__,
);
const environment = new Environment({
network: Network.create(fetcher.fetch.bind(fetcher)),
store: new Store(new RecordSource()),
});
export default environment;
```
```
import { QueryRenderer } from 'react-relay';
import environment from '../../../../../relayEnvironment';
export function ListingContainer(containerProps: Props): React.Node {
const { providerUpdate } = containerProps;
return (
{
// it takes 18s to reach this part of the code
}}
/>
);
}
export default ListingContainer;
```
Any idea why / how this can be solved ? We want to avoid implementing pagination since it's technically very hard to do on the backend side given the variety of data sources we use.
I feel like 1500 items shouldn't be a problem with modern web apps 😅
Contributor guide
Assessment
This issue has not been assessed yet.