Relay: `loadQuery` should not be called inside a React render function.
- Dominant language
- Rust
- Stars
- 19k
- Forks
- 1.9k
- PR merge metrics
- No merged PRs in 30d
Description
I created a RelayTestComponent for re-use during testing
```
import { Suspense } from 'react';
import { loadQuery, RelayEnvironmentProvider } from 'react-relay/hooks';
import { createMockEnvironment, MockPayloadGenerator } from 'relay-test-utils';
import { Router } from 'react-router-dom';
import { createMemoryHistory } from 'history';
export default ({ resolver, query, variables = {}, fetchPolicy, children }) => {
// Necessary for router provider
const history = createMemoryHistory();
// Mock relay environment
const mockEnvironment = createMockEnvironment();
mockEnvironment.mock.queueOperationResolver(operation =>
// Resolve = data you want returned
MockPayloadGenerator.generate(operation, resolver),
);
// Execute Query
mockEnvironment.mock.queuePendingOperation(query, variables);
const preloadedQuery = loadQuery(mockEnvironment, query, variables, {
fetchPolicy: 'store-or-network',
...fetchPolicy,
});
return (
{children(preloadedQuery)}
);
};
```
Then I have a component which uses `preloadedQuery` and renders the component im trying to test:
```
const Component = ({ preloadedQuery }) => {
const data = usePreloadedQuery(BANNER_TEST_QUERY, preloadedQuery);
/* COMPONENT HERE */
return ;
};
```
Im my test I do:
```
render(
{preloadedQuery => }
)
```
But now im getting this error for every test after the 1st test:
```
Warning: Relay: `loadQuery` should not be called inside a React render function.
24 | mockEnvironment.mock.queuePendingOperation(query, variables);
25 |
> 26 | const preloadedQuery = loadQuery(mockEnvironment, query, variables, {
| ^
27 | fetchPolicy: 'store-or-network',
28 | ...fetchPolicy,
29 | });
```
Contributor guide
Assessment
This issue has not been assessed yet.