relay: useLazyLoadQuery breaks with GC after quick unmount -> mount

useLazyLoadQuery is returning undefined without refetching when the following occurs:

  1. A component using useLazyLoadQuery mounts and eventually unsuspends.
  2. 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)

Commits related to this issue

Most upvoted comments

I’m still experiencing useLazyLoadQuery returning undefined in v13 although it’s been hard to reproduce

we 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