Amplify-js: Return data inside GraphQL Errors

[jagonzalr]

Is your feature request related to a problem? Please describe.
When making a GraphQL call using API.graphql if there is an error we can't get the actual error because the data value is and empty object.

Describe the solution you'd like
When returning the error add the data from the response that comes from Axios.

Describe alternatives you've considered
I've considered changing the status code when certain errors happen to 200 and manually handle those cases on the frontend. By doing this we wouldn't need to do that since the error message will be available on the catch

Additional context

try {
    const operation = graphqlOperation(query, params)
    const response = await API.graphql(operation)
    return response
  } catch (err) {
    // err doesn't include the actual error from GraphQL
    return err
  }

[iartemiev]

@jagonzalr, the AppSync (GQL server) error should be in err.errors. Are you not seeing it there?

Here are some examples of the error data shape: http://docs.aws.amazon.com/appsync/latest/devguide/troubleshooting-and-common-mistakes.html#mapping-template-errors

[jagonzalr]

@iartemiev I'm not using AppSync but a custom GraphQL endpoint with API Gateway and Lambda.

If the handler of the Lambda is something like this

export const handler = async event => {
  try {
    const body = JSON.parse(event.body)
    const reply = await executeGraphql(body)
    if (reply.errors) {
      const errors = reply.errors
      throw errors[0]
    }

    return { statusCode: 200, reply }
  } catch (err) {
    return { statusCode: 400, err }
  }
}

If I call the endpoint on the frontend (React)

import { API, graphqlOperation } from 'aws-amplify'

export const deleteAccount = async params => {
  const mutation = `
    mutation deleteAccount ($id: ID!) {
      deleteAccount (id: $id) {
        id
      }
    }
  `

  try {
    const operation = graphqlOperation(mutation, params)
    const response = await API.graphql(operation)
    return { result: response.data.deleteAccount }
  } catch (err) {
    return { error: err.errors[0] }
  }
}

I logged the response from the Chrome console and what the err object. You can see that I can't see the error message returned by the GraphQL endpoint.

[iartemiev]

I'm not using AppSync but a custom GraphQL endpoint with API Gateway and Lambda.

Got it. My apologies for assuming.

For GraphQL servers (AppSync, Apollo server, etc.) the common pattern is to always return a 200 status code. The client then checks whether the errors array is non-empty to infer if any GraphQL errors have occurred. The Amplify API category is structured around this assumption. API.graphql will throw when errors.length > 0 and the status code is 200. Any other response will be treated as an Axios network request error as you pointed out in your OP.

Typically you'll only see something other than 200, e.g., 500 when the server itself encounters an error.

[jagonzalr]

Ohhh got it. Let me update my code to return a status code 200 and see how it works. I'll let you know if this fixes my issue. Thanks!

[jagonzalr]

@iartemiev I can confirm that using status code 200 instead of 400 the Amplify API category will successfully get the errors array from the backend. For reference the updated Lambda with GraphQL ends up like this:

export const handler = async event => {
  try {
    const body = JSON.parse(event.body)
    const reply = await executeGraphql(body)
    return { statusCode: 200, reply }
  } catch (err) {
    return { statusCode: 400, err }
  }
}

Thank you very much for all your help.

I will be closing this ticket now.