How to Use a Mock API in React While Your Backend Is Being Built

Frontend development does not need to stop while you wait for backend endpoints. In this tutorial, you will connect a React application to a hosted Forge API endpoint, load product data, handle loading and error states, and keep the API URL in one place so it can be replaced later.

1. Why use a mock API with React?

A frontend often needs API data before the production backend is available. Using a hosted mock API gives your React application a real HTTP endpoint to call while the backend team continues building the production service.

The important part is keeping the API address and request logic separate from your UI. Your React components call a reusable API function, and that function builds requests from one base URL.

2. Create a Forge API endpoint

Create a Forge API project and add a /products endpoint. For this example, use a JSON response similar to the following:

[
  {
    "id": 1,
    "name": "Wireless Headphones",
    "price": 79.99,
    "inStock": true
  },
  {
    "id": 2,
    "name": "Mechanical Keyboard",
    "price": 109.99,
    "inStock": true
  },
  {
    "id": 3,
    "name": "USB-C Hub",
    "price": 49.99,
    "inStock": false
  }
]

Your endpoint will have a hosted URL similar to:

https://apis.getforgeapi.com/YOUR_PROJECT_KEY/products

3. Store the API base URL in one place

Do not repeat the full Forge API URL inside every component or API request. Create one configuration file instead.

const API_BASE_URL =
  "https://apis.getforgeapi.com/YOUR_PROJECT_KEY";

export default API_BASE_URL;

The base URL stops at your project key. Your reusable API function can append /products, /users, /orders, or any other endpoint it needs.

4. Create a reusable API function

Instead of creating a separate fetch function for every endpoint, keep the shared GET request logic in one reusable function.

import API_BASE_URL from "../config/api";

export async function getApiRes(endpoint: string) {
  const path = endpoint.replace(/^\/+/, "");
  const response = await fetch(`${API_BASE_URL}/${path}`);

  if (!response.ok) {
    throw new Error(`API request failed: ${response.status}`);
  }

  return response.json();
}

The function accepts an endpoint name and combines it with your API base URL. That means the same function can request different resources.

const products = await getApiRes("products");
const users = await getApiRes("users");
const orders = await getApiRes("orders");

5. Fetch the products from React

Your component can now call getApiRes("products") without knowing the Forge API URL or constructing the request itself.

import { useEffect, useState } from "react";
import { getApiRes } from "./services/api";

export default function Products() {
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");

  useEffect(() => {
    async function loadProducts() {
      try {
        const data = await getApiRes("products");
        setProducts(data);
      } catch {
        setError("Could not load products.");
      } finally {
        setLoading(false);
      }
    }

    loadProducts();
  }, []);

  if (loading) {
    return <p>Loading products...</p>;
  }

  if (error) {
    return <p>{error}</p>;
  }

  return (
    <main>
      <h1>Products</h1>

      <ul>
        {products.map((product) => (
          <li key={product.id}>
            <strong>{product.name}</strong>
            <span> — ${product.price}</span>
          </li>
        ))}
      </ul>
    </main>
  );
}

This example deliberately includes loading and error states. Those are part of the API integration your frontend needs to handle regardless of whether the data comes from a mock service or the final backend.

6. Test the React frontend

Start your React application and open the products screen. The browser sends a normal HTTP request to your hosted Forge API endpoint and your component renders the returned JSON.

7. Switch to your real backend later

When your production API is ready, replace the Forge API base URL with your backend URL:

const API_BASE_URL = "https://api.example.com";

export default API_BASE_URL;

If your production API uses the same routes and response shapes, your reusable API function and React components do not need to change.

Next steps

You can use getApiRes() for users, orders, posts, dashboard data and other GET endpoints. Keep the API location and request logic centralized so your application code depends on the API contract rather than the temporary backend implementation.