useLazyLoadQuery breaks for @defer and @@stream within StrictMode

[artola]

ONLY within StrictMode and having @stream or @defer (normal queries without them work all the time) the hook shows the warning 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:

  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.

  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.

---

type Metasyntactic {
  bar: String
  baz: String
  foo: String
  qux: String
}

type Query {
  metasyntactic: Metasyntactic
}

const Deferred = ({fragRef}) => {
  const data = useFragment(
    graphql`
      fragment demo8Fragment on Metasyntactic {
        bar
        baz
      }
    `,
    fragRef,
  );

  return (
    <>
      <div>{data.bar}</div>
      <div>{data.baz}</div>
    </>
  );
};

const Variables = ({cacheBuster}) => {
  const data = useLazyLoadQuery(
    graphql`
      query demo8Query {
        metasyntactic {
          foo
          ...demo8Fragment @defer
        }
      }
    `,
    {},
    {fetchKey: cacheBuster},
  );

  return (
    <>
      {data.metasyntactic && (
        <>
          <div>{data.metasyntactic.foo}</div>
          <hr />
          <Suspense fallback="loading ...">
            <Deferred fragRef={data.metasyntactic} />
          </Suspense>
          <hr />
        </>
      )}
    </>
  );
};

What is clear, that the hook (as I do understand) should suspend or return cached data, but this is showing a bug:

[alunyov]

Thanks for the detailed report @artola!

Can we quickly check one thing - if this is related to the GC. Can you try adding store.holdGC() just after you've created an instance of the store and see if the issue is there?

[artola]

Thanks for the detailed report @artola!

Can we quickly check one thing - if this is related to the GC. Can you try adding store.holdGC() just after you've created an instance of the store and see if the issue is there?

Using the same store config that above but adding store.holdGC(); there is NO ERROR, of course when the component is unmounted/remounted always shows the cached data.

  const recordsource = new RecordSource(initialRecords);
  const store = new Store(recordsource, {
    gcReleaseBufferSize: 0,
  });
  store.holdGC();