What could be causing the 404 Not Found error for PATCH and DELETE requests?

How can I ensure my mock server handles these methods correctly?

I’m building a React application that interacts with a mock API. I can successfully perform GET and POST operations, but I’m encountering issues with PATCH and DELETE requests, which return a 404 (Not Found) error. I’ve provided the relevant code below. Could anyone help identify what might be causing these errors?

here’s my code:

App.js:

`import Header from "./Header";
import Footer from "./Footer";
import ListItem from "./ListItem";
import "./index.css";
import { useState, useEffect } from "react";
import AddItem from "./AddItem";
import SearchItem from "./SearchItem";
import ApiRequest from "./ApiRequest";

function App() {
  const API_URL = "http://localhost:3500/items";
  const [items, setItems] = useState([]);
  const [newItem, setNewItem] = useState("");
  const [search, setSearch] = useState("");
  const [fetchError, setFetchError] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const fetchItems = async () => {
      try {
        const data = await ApiRequest(API_URL, { method: "GET" });
        setItems(data.items || []);
        setFetchError(null);
      } catch (error) {
        setFetchError(error.message);
      } finally {
        setIsLoading(false);
      }
    };

    setTimeout(fetchItems, 2000);
  }, []);

  const addItem = async (item) => {
    const id = items.length ? items[items.length - 1].id + 1 : 1;
    const addNewItem = { id, checked: false, item };
    const listItems = [...items, addNewItem];
    setItems(listItems);

    const postOptions = {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(addNewItem),
    };

    try {
      await ApiRequest(API_URL, postOptions);
      setFetchError(null);
    } catch (error) {
      setFetchError(error.message);
    }
  };

  const handleCheck = async (id) => {
    const updatedItems = items.map((item) =>
      item.id === id ? { ...item, checked: !item.checked } : item
    );
    setItems(updatedItems);

    const updateOptions = {
      method: "PATCH",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ checked: updatedItems.find(item => item.id === id).checked }),
    };

    try {
      await ApiRequest(`${API_URL}/${id}`, updateOptions);
      setFetchError(null);
    } catch (error) {
      setFetchError(error.message);
    }
  };

  const handleDelete = async (id) => {
    const remainingItems = items.filter((item) => item.id !== id);
    setItems(remainingItems);

    const deleteOptions = {
      method: "DELETE",
      headers: {
        "Content-Type": "application/json",
      },
    };

    try {
      await ApiRequest(`${API_URL}/${id}`, deleteOptions);
      setFetchError(null);
    } catch (error) {
      setFetchError(error.message);
    }
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!newItem) return;
    addItem(newItem);
    setNewItem("");
  };

  return (
    <div className="App">
      <Header name="To do List" />
      <AddItem
        newItem={newItem}
        setNewItem={setNewItem}
        handleSubmit={handleSubmit}
      />
      <SearchItem search={search} setSearch={setSearch} />

      <main>
        {isLoading && <p><b>Loading Items</b></p>}
        {fetchError && <p><b>{`Error: ${fetchError}`}</b></p>}
        {!isLoading && !fetchError && (
          <ListItem
            items={items.filter((item) =>
              item.item.toLowerCase().includes(search.toLowerCase())
            )}
            handleCheck={handleCheck}
            handleDelete={handleDelete}
          />
        )}
      </main>
      <Footer length={items.length} />
    </div>
  );
}`

export default App;

ApiRequest.js:

`const ApiRequest = async (url = "", optionsObj = {}) => {
  try {
    const response = await fetch(url, optionsObj);
    if (!response.ok) {
      const errorText = await response.text();
      throw new Error(`HTTP error! Status: ${response.status}. Details: ${errorText}`);
    }
    return response.json(); // Return parsed JSON data
  } catch (error) {
    console.error('API request error:', error.message);
    throw error; // Rethrow the error for handling in calling function
  }
};

export default ApiRequest;`

Response:
Failed to load resource: the server responded with a status of 404 (Not Found)