facebook / facebook/relay

Errors in the response makes relay crash?

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

Description

## Problem

I am using AWS Appsync as my graphQL server and when I trigger/return an error from the api, the relay useLazyLoadQuery crashes.

## Environment
```
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^10.4.8",
"@testing-library/user-event": "^7.1.2",
"aws-amplify": "^3.0.22",
"babel-plugin-relay": "^10.0.1",
"cypress-react-unit-test": "^4.11.2",
"history": "^5.0.0",
"prop-types": "^15.7.2",
"react": "0.0.0-experimental-3d0895557",
"react-dom": "0.0.0-experimental-3d0895557",
"react-relay": "^0.0.0-experimental-8058ef82",
"react-router-dom": "^0.0.0-experimental-ffd8c7d0",
"react-scripts": "3.4.1",
"recoil": "^0.0.10",
"relay-runtime": "^10.0.1",
"relay-test-utils": "^10.0.1",
},

"devDependencies": {
"babel-eslint": "^10.1.0",
"cypress": "^4.12.1",
"cypress-cucumber-preprocessor": "^2.5.4",
"eslint-config-airbnb": "^18.2.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.20.5",
"eslint-plugin-react-hooks": "^4.0.8",
"graphql": "^15.3.0",
"prettier": "^2.0.5",
"relay-compiler": "^10.0.1"
}
```
## Query and response
```
const data = useLazyLoadQuery(
graphql`
query LandingQuery ($subdomain: String!){
niche(subdomain: $subdomain){
...TaglineFragment
}
}
`,
{ subdomain: 'boe' },
);
```

```
const data = useFragment(
graphql`
fragment TaglineFragment on Niche {
tagline
}`,
niche,
);
```

` {"data":{"niche":null},"errors":[{"path":["niche"],"data":{"tagline":null},"errorType":"400","errorInfo":null,"locations":[{"line":2,"column":3,"sourceName":null}],"message":"UnknownNiche"}]}`

```
TypeError: Cannot read property 'name' of undefined
getFragmentIdentifier
node_modules/relay-runtime/lib/util/getFragmentIdentifier.js:30
27 | }).join(',') + ']';
28 | var fragmentVariables = getVariablesFromFragment(fragmentNode, fragmentRef);
29 | var dataIDs = getDataIDsFromFragment(fragmentNode, fragmentRef);
> 30 | return fragmentOwnerIdentifier + '/' + fragmentNode.name + '/' + JSON.stringify(stableCopy(fragmentVariables)) + '/' + ((_JSON$stringify = JSON.stringify(dataIDs)) !== null && _JSON$stringify !== void 0 ? _JSON$stringify : 'missing');
31 | }
32 |
33 | module.exports = getFragmentIdentifier;
View compiled
useFragmentNode
node_modules/react-relay/lib/relay-experimental/useFragmentNode.js:37
34 | var _useState = useState(0),
35 | forceUpdate = _useState[1];
36 |
> 37 | var fragmentIdentifier = getFragmentIdentifier(fragmentNode, fragmentRef); // The values of these React refs are counters that should be incremented
| ^ 38 | // under their respective conditions. This allows us to use the counters as
39 | // memoization values to indicate if computations for useMemo or useEffect
40 | // should be re-executed.
View compiled
useLazyLoadQueryNode
node_modules/react-relay/lib/relay-experimental/useLazyLoadQueryNode.js:111
108 | var fragmentNode = preparedQueryResult.fragmentNode,
109 | fragmentRef = preparedQueryResult.fragmentRef;
110 |
> 111 | var _useFragmentNode = useFragmentNode(fragmentNode, fragmentRef, componentDisplayName),
| ^ 112 | data = _useFragmentNode.data;
113 |
114 | return data;
View compiled
useLazyLoadQuery
node_modules/react-relay/lib/relay-experimental/useLazyLoadQuery.js:26
23 | // loadQuery was called during render
24 | useTrackLoadQueryInRender();
25 | var query = useMemoOperationDescriptor(gqlQuery, variables);
> 26 | var data = useLazyLoadQueryNode({
| ^ 27 | componentDisplayName: 'useLazyLoadQuery()',
28 | fetchKey: options === null || options === void 0 ? void 0 : options.fetchKey,
29 | fetchPolicy: options === null || options === void 0 ? void 0 : options.fetchPolicy,
View compiled
Landing
src/components/Landing/index.jsx:10
7 | import Tagline from '../Tagline/index';
8 |
9 | export default function Landing() {
> 10 | const data = useLazyLoadQuery(
11 | graphql`
12 | query LandingQuery ($subdomain: String!){
13 | niche(subdomain: $subdomain){
```

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.