facebook / facebook/relay

Relay: `loadQuery` should not be called inside a React render function.

Open
#3,449 14 comments 0 reactions 0 assignees View on GitHub
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

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.