Solution: Use Error and Loading in the UI

I gave you an assignment to make the UI a little more friendly using Apollo's error and loading states.

To take advantage of the loading state, we can disable the button and change the text when the mutation is loading:

<button
  type="button"
  disabled={!description || loading}
  onClick={addHabit}
>
  Add{loading ? "ing..." : ""}
</button>

We can also display the error message above the form:

{error && <p>Error! {error.message}</p>}

This lets the user know there's a problem, since create-react-app development errors will be hidden during production.

By the way, you can see that for yourself by running npm run build and then using a server like http-server to just run those files:

npm install -g http-server
cd habit-tracker
npm run build
http-server ./build

Are you ready for that habits list to refresh automatically? I know I am. Let's learn about that next.