relay: useLazyLoadQuery breaks with GC after quick unmount -> mount
useLazyLoadQuery is returning undefined without refetching when the following occurs:
- A component using useLazyLoadQuery mounts and eventually unsuspends.
- This component is then unmounted in one place to be mounted in a separate spot in the JSX.
The following error warning is printed in the console:
Warning: Relay: Expected to have been able to read non-null data for fragment
`ProofOfBugQuery` declared in `useLazyLoadQuery()`, since fragment reference
was non-null. Make sure that that `useLazyLoadQuery()`'s parent isn't holding on
to and/or passing a fragment reference for data that has been deleted.
This problem is not occuring when garbage collection is disabled, either by running environment.retain() on that query or by setting a large gcReleaseBufferSize in the provider.
Here is a runnable example to reproduce the bug:
import React, { useEffect, Suspense, useState } from 'react';
import { graphql, useLazyLoadQuery } from 'react-relay/hooks';
const Content = ({ onMount }) => {
const data = useLazyLoadQuery(
graphql`
query ProofOfBugQuery {
viewer {
x
}
}
`,
{},
);
useEffect(() => {
onMount();
}, []);
return <div>{data ? 'Loaded' : 'ERROR, data is undefined'}</div>;
};
const ProofOfBug = () => {
const [switched, setSwitched] = useState(false);
const onMount = () => {
setTimeout(() => setSwitched(true), 1000);
};
return (
<Suspense fallback="Loading">
<div>{switched ? null : <Content onMount={onMount} />}</div>
<div>{switched ? <Content onMount={onMount} /> : null}</div>
</Suspense>
);
};
export default ProofOfBug;
This is the version of Relay in use:
"relay-compiler": "10.1.0",
"relay-compiler-language-typescript": "13.0.2",
"relay-config": "10.1.0",
"react-relay": "0.0.0-experimental-c818bac3",
"relay-runtime": "10.1.0",
Hopefully this bug report is understandable. Please let me know if I can provide any more helpful information!
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Reactions: 4
- Comments: 19 (7 by maintainers)
I’m still experiencing
useLazyLoadQuery
returningundefined
in v13 although it’s been hard to reproducewe haven’t cut a new experimental release, will let you know when we do
hey, not yet, but working on it
react and react-dom are locked to
16.13.1
in yarn.lock@jstejada We started using Relay on
0.0.0-experimental-c818bac3
(the version on which we reproduced this problem) so we do not know if this is a regression or long term bug in the library.Here is a repo that reproduces the issue (you need to add your github key to the environment) https://github.com/imownbey/relay-examples. Note how I had to comment out https://github.com/imownbey/relay-examples/blob/master/issue-tracker/src/RelayEnvironment.js#L62 to make it throw the error