NerdGraphError - cannot read property length of undefined

[devfreddy]

Description

When running a NerdGraph query for accounts, if we errantly ask for a field that isn't allowed to be returned we get:

TypeError: Cannot read property 'length' of undefined
at _defaultDetails (vendors~40e251de-1278-49dd-9ce0-9a09006e79f4--vendors.js:30580)

This happens because we're making some assumptions about the shape of the response from NerdGraph, we're expecting graphQLErrors to be available and in this case its not.

Instead we get:

{
    "errors": [{
        "locations": [{
            "column": 7,
            "line": 5
        }],
        "message": "Cannot query field \"derp\" on type \"AccountOutline\"."
    }]
}

Steps to Reproduce

1. Make a NerdGraph request like this:

NerdGraphQuery.query({
    query: `
      {
        actor {
          accounts {
            id
            derp
          }
        }
      }
    `,
    fetchPolicyType: NerdGraphQuery.FETCH_POLICY_TYPE.NO_CACHE
  });

Note: 'derp' is an invalid field.

Expected Behaviour

When no graphQLErrors are available, still render and show us what information is there.

Relevant Logs / Console output

TypeError: Cannot read property 'length' of undefined
at _defaultDetails (vendors~40e251de-1278-49dd-9ce0-9a09006e79f4--vendors.js:30580)
at NerdGraphError.render (vendors~40e251de-1278-49dd-9ce0-9a09006e79f4--vendors.js:30654)
at finishClassComponent (react-dom.development.js:14425)
at updateClassComponent (react-dom.development.js:14388)
at beginWork (react-dom.development.js:15206)
at performUnitOfWork (react-dom.development.js:17944)
at workLoop (react-dom.development.js:17984)
at renderRoot (react-dom.development.js:18070)
at performWorkOnRoot (react-dom.development.js:18961)
at performWork (react-dom.development.js:18873)

[devfreddy]

Follow-up thoughts attempting to utilize this component:

1. Our documentation states for our data-fetching components:

error: ApolloError, // Runtime error with graphQLErrors and networkError properties.

As above, we should figure out when this isn't true and account for it.

2. Our prop name of error should stay the same, but it should become smarter and more able to handle anything thrown at it. i.e. try to account for any data type passed to it.

• Array - perhaps we can iterate through and if they look like errors (plural) render each
• null/undefined - someone could errantly pass something that isn't an error, we could enforce it with propTypes (better) or we could try to do something smart like don't render anything (opinionated, maybe a bad idea, but situationally nice)
• object - what we currently expect
• string - same as null/undefined, do we display it or complain