facebook / facebook/relay

Performance issues on QueryRenderer

Open
#3,185 1 comment 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

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

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.