17. Code-Along: Error handling
2m

What happens when things go wrong?

So far, we've only covered the happy path. We've assumed that all our calls to the Catstronauts API return successfully.

But what if we get back an error?

Resources:

  • Apollo Docs: Error handling: Making errors actionable on the client and server

Code-Along: Adding error handling to incrementTrackViews

  1. Set up a mutation in Sandbox that throws an error
  2. Add error handling to the resolver.
  3. Test in Sandbox that we get back data instead of errors.

Step 1) Throw an error in Sandbox

Try running the mutation for incrementing track views again in Sandbox...

mutation IncrementTrackViews($incrementTrackViewsId: ID!) {
incrementTrackViews(trackId: $incrementTrackViewsId) {
code
message
success
track {
id
numberOfViews
}
}
}

...but this time pass in a fake value for the incrementTrackViewsId variable:

{
"incrementTrackViewsId": "what's going to happen??"
}

Our response has a big errors object! (Instead of the data object we're used to.)

Digging into this error, we can see what went wrong (errors[0].message), the endpoint that threw the error (errors[0].extensions.response.url), and more.

Step 2) Add error handling

Note: This is standard JavaScript stuff, nothing GraphQL- or Apollo-specific!

  1. Update your incrementTrackViews resolver to fail gracefully by wrapping the current contents in a try block.

    Inside the catch block, print out the error object so we can see what's in there. Then run your mutation in Sandbox again, and check the terminal output.

    src/resolvers.js
    incrementTrackViews: async (parent, {trackId}, {dataSources}) => {
    try {
    const track = await dataSources.catsAPI.incrementTrackViews(trackId);
    return {
    code: 200,
    message: 'Successfully incremented track views',
    success: true,
    track
    };
    } catch (error) {
    console.log(error);
    }
    };
  2. It looks like there's an error.extensions.response object with some useful info. Let's use that to populate the code and message fields of our TrackMutationResponse object:

    src/resolvers.js
    incrementTrackViews: async (parent, {trackId}, {dataSources}) => {
    try {
    const track = await dataSources.catsAPI.incrementTrackViews(trackId);
    return {
    code: 200,
    message: 'Successfully incremented track views',
    success: true,
    track
    };
    } catch (error) {
    return {
    code: error.extensions.response.status,
    message: error.extensions.response.body,
    success: false,
    track: null
    };
    }
    };

Step 3) Test it in Sandbox

Now run the mutation again in Sandbox. You should get back a response object with a data field instead of the errors field.

{
"data": {
"incrementTrackViews": {
"code": 404,
"message": "Not Found",
"success": false,
"track": null
}
}
}
Previous
Next