In this tutorial we will implement use JavaScript fake API with mock data from a pseudo backend to create our frontend application with React. Often this helps whenever there is no backend yet and you need to implement your React frontend against some kind of realistic data. You can find the finished project on GitHub .
In a previous tutorial, we implemented the fake API with JavaScriptâs Promises for having it asynchronous and JavaScriptâs setTimeout function for having an artificial delay. Now we want to use this fake API with its mock data as replacement for a backend in our React application. We will start with a clean slate of a React application:
For our App component, we import all the functions from our previously implemented fake API. The getUser function isnât needed, hence we donât have to import it.
Next, we are going to fetch the mock data from the fake API. Therefore we are using Reactâs useEffect Hook and store the mock data with Reactâs useState Hook in the componentâs state:
If there is no mock data when the component renders for the first time, we donât render anything by returning null (see conditional rendering ). If the data arrives eventually, we render it as a list :
Optionally we could also add error handling for the fetching of the mock data. However, in this tutorial we wonât implement any real error handling (or loading indicators). Please check my how to fetch data with React tutorial if you are interested in this topic.
Thatâs it for fetching mock data and rendering it. You could replace this API function always with a function which calls a real backendâs API.
Letâs continue with creating more mock data. First, we will need a form to input all the information for the new data:
Second, the implementation details for the two event handlers which update the form state:
Third, the handler for the actual creation when the form gets submitted; which prevents the default to avoid a browser refresh . Again, there could be handling for error state and loading state too, but we cover this in another tutorial.
The actual creation of the additional mock data should work, however, you will not see the result reflected in the React UI. Thatâs because we are not updating the mock data in the UI. There are two ways to keep the UI in sync after a request which modifies data on the backend:
We will do the latter way to keep the mocked data in sync. However, feel free to follow the other way. In order to implement the refetching, we need to extract the actual logic which is used to fetch the mock data in the first place:
We have to use Reactâs useCallback Hook here, because it memoizes the function for us which mean that it doesnât change and therefore Reactâs useEffect Hook isnât called in an endless loop. Next, we can reuse this extracted function to refetch the mocked data after creating new data:
Thatâs it. After creating new data for our fake backend, we refetch all the mock data and let the component re-render with it. Just refetching everything keeps the data from (pseudo) backend and frontend in sync.
Next we will implement the process of updating data in our pseudo database. First, we will introduce a button which will be used to flip the boolean for one property of our mock data:
Whatâs missing is the handler which updates the mock data via our fake API and which refetches all mock data afterward for keeping the data in sync:
Thatâs it for updating the mock data. We just flipped a boolean here, but you can imagine how you could use this with input fields as well to change the other properties of the mocked entity. Last but not least, we will implement a button to remove mock data and a handler which does the actual deletion of it:
Thatâs it. Updating and deleting items in our mock data from our pseudo database which is accessible via our fake API is possible now.
After all, we use all four CRUD operations from our fake API which connects to a pseudo database in our React application. We could easily exchange the functions for the fake API with functions which hit real API endpoints now. The frontend wouldnât need any changes. With all this knowledge, frontend developers are empowered to create their own mock data API until the backend gives you a real API to work with.