Boost Your React Apps with Apollo: Fetching & Updating Data

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:

  disabled={!description || loading}
  Add{loading ? "ing..." : ""}

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.


I finished! On to the next chapter