useLazyLoadQuery breaks for @defer and @@stream within StrictMode
- Dominant language
- Rust
- Stars
- 19k
- Forks
- 1.9k
- PR merge metrics
- No merged PRs in 30d
Description
**ONLY** within `StrictMode` and having **@stream** or **@defer** (normal queries without them work all the time) the hook [shows the warning](https://github.com/facebook/relay/blob/ee374c8e2f0c4d75c64e3f76ac61032f52836760/packages/react-relay/relay-hooks/useFragmentNode.js#L111) and in place of suspend, it allows the code to continue running and breaking. **Important**: IT WORKS when the component is mounted, it is later on when we unmount/remount that IT FAILS.
It is somehow related to the cache, when it expires this throws the error. See for example these 2 scenarios:
```javascript
const recordsource = new RecordSource(initialRecords);
const store = new Store(recordsource, {
queryCacheExpirationTime: 10 * 1_000,
});
```
- Mount the component and wait for 10 seconds, then unmount/remount and the error is shown.
```javascript
const recordsource = new RecordSource(initialRecords);
const store = new Store(recordsource, {
gcReleaseBufferSize: 0,
});
```
- Mount the component and wait until it shows the data, then unmount/remount and the error is shown.
---
```graphql
type Metasyntactic {
bar: String
baz: String
foo: String
qux: String
}
type Query {
metasyntactic: Metasyntactic
}
```
```javascript
const Deferred = ({fragRef}) => {
const data = useFragment(
graphql`
fragment demo8Fragment on Metasyntactic {
bar
baz
}
`,
fragRef,
);
return (
<>
);
};
const Variables = ({cacheBuster}) => {
const data = useLazyLoadQuery(
graphql`
query demo8Query {
metasyntactic {
foo
...demo8Fragment @defer
}
}
`,
{},
{fetchKey: cacheBuster},
);
return (
<>
{data.metasyntactic && (
<>
)}
);
};
```
What is clear, that the hook (as I do understand) should suspend or return cached data, but this is showing a bug:

Contributor guide
Assessment
This issue has not been assessed yet.