Loading and Error Handling

In this lesson we explore how to handle loading and error states when it comes to fetching code, this is crucial for providing a better user experience.

The best way to do this is to assign a state value to the data depending on what's happening. So if it's loading, we can set the state to "loading", if it's errored, we can set the state to "error".

We can then manage these states with something like a switch statement or an object, which will also allow us to return the different values based on the state.

Let's start implementing this in our code...

Code Implementation#

In out data-loader.js file, let's first create a function called formatDataResponse below the prefetchOnEvent function.

xxxxxxxxxx

// data-loader.js

​

export function prefetchOnEvent(key, fn) {

  // function logic...

}

​

function formatDataResponse() {} // new code

This function will contain the loading and error states.

In the formatDataResponse function, destructure the status and payload values as arguments.

xxxxxxxxxx

function formatDataResponse({ status, payload }) {}

Then we can create an object called statusResponse that will return the correct object based on the status.

Add properties to the statusResponse object based on the different states. For example, if the status is "loading", return an object that indicates the loading state. Similarly, add properties for error and success states.

xxxxxxxxxx

function formatDataResponse({ status, payload }) {

  const statusResponse = {

    loading: { isLoading: true },

    error: { error: payload },

    success: { data: payload },

  };

  return statusResponse[status];

}

Then we can return the statusResponse object that matches the status passed in as an argument.

Because we want to be able to destructure the object from our useData hook, we'll need to pass default values to the other properties. For example, the loading status will also need default values for error and data, which can be set to null.

xxxxxxxxxx

function formatDataResponse({ status, payload }) {

  const defaultData = { isLoading: false, data: null, error: null };

​

  const statusResponse = {

    loading: { ...defaultData, isLoading: true },

    error: { ...defaultData, error: payload },

    success: { ...defaultData, data: payload },

  };

  return statusResponse[status];

}

Now we can update the prefetchData function to add the status and payload data to the cache. Set the status to "success" and give it a payload of data. Add a catch block to handle errors and return the error in the payload.