facebook / facebook/relay

useLazyLoadQuery breaks for @defer and @@stream within StrictMode

Open
#3,756 3 comments 0 reactions 0 assignees View on GitHub
bug
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 (
<>

{data.bar}

{data.baz}


);
};

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

return (
<>
{data.metasyntactic && (
<>

{data.metasyntactic.foo}









)}

);
};

```

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

![image](https://user-images.githubusercontent.com/11500763/149655641-8c3f00fe-a459-4e36-b5f7-270d7074a13f.png)

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.