facebook / facebook/relay

Fragments render with missing data when using partial rendering

Open
#3,651 3 comments 1 reaction 0 assignees View on GitHub
Dominant language
Rust
Stars
19k
Forks
1.9k
PR merge metrics
No merged PRs in 30d

Description

When a query renders with partial data, but the network request fails the suspended fragments resolve with missing data instead of throwing the error.

Here's an example repro of the issue with the issue tracker example: https://github.com/janicduplessis/relay-examples/tree/partial-render-error-repro

To test, follow the instructions in the issue-tracker folder, then when the app is started click on one of the issue to open the issue details and see the error `TypeError: undefined is not an object (evaluating 'data.comments.edges')`.

I investigated the cause and managed to patch the issue with this, if this seems like a good solution I can open a PR with the fix.

```diff
diff --git a/node_modules/react-relay/lib/relay-hooks/FragmentResource.js b/node_modules/react-relay/lib/relay-hooks/FragmentResource.js
index 180289e..1c82a2b 100644
--- a/node_modules/react-relay/lib/relay-hooks/FragmentResource.js
+++ b/node_modules/react-relay/lib/relay-hooks/FragmentResource.js
@@ -146,6 +145,10 @@ var FragmentResourceImpl = /*#__PURE__*/function () {
throw cachedValue.promise;
}

+ if (cachedValue.kind === 'error') {
+ throw cachedValue.error;
+ }
+
if (cachedValue.kind === 'done' && cachedValue.result.snapshot) {
this._reportMissingRequiredFieldsInSnapshot(cachedValue.result.snapshot);

@@ -401,7 +402,7 @@ var FragmentResourceImpl = /*#__PURE__*/function () {
var promise = networkPromise.then(function () {
_this5._cache["delete"](cacheKey);
})["catch"](function (error) {
- _this5._cache["delete"](cacheKey);
+ _this5._cache.set(cacheKey, {kind: 'error', error: error});
}); // $FlowExpectedError[prop-missing] Expando to annotate Promises.

promise.displayName = networkPromise.displayName;
```

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.