Errors in the response makes relay crash?

ben-elsen commented 4 years ago

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){

stale[bot] commented 3 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

TheOpenDevProject commented 3 years ago

Having the same issue

philipheinser commented 2 years ago

Same the error makes it hard to understand what's going on.

maxprilutskiy commented 1 year ago

If you're seeing this error - make sure the instance of Error type is being thrown. That fixed the issue for me.

facebook / relay