CODEWITHSUNDEEP
reactjsnext.jsfetch-api
UberNoob
UberNoob

Reputation: 41

Next.js Dynamic API Page returning "local..../undefined/api/......". Unable to reach desired API

I am calling a function through 2 layers of React components with a unique item ID. The function "statusHandler" sends a fetch call to my "api/orders/ + ID". I am using the Next.js setup and pages to call the API routes.

I am receiving the error:

Failed to load resource: the server responded with a status of 404 undefined/api/orders/62f9df251286e27e0c7888df:1(Not Found)

Why is there undefined in the API call and what is the correct way to pass a function through 2 component layers with a variable without executing it?

AdminPage with Handler function

const AdminStatus = (props) => {
  const [ordersList, setOrdersList] = useState(props.orders);

  const statusHandler = async (id) => {
    console.log("STATUS HANDLER");
    const { URL } = process.env;
    const selectedOrder = ordersList.filter((order) => order._id === id)[0];
    const currentStatus = selectedOrder.count;

    try {
      const res = await fetch(URL + "/api/orders/" + id, {
        method: "PUT",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ statuscount: currentStatus + 1 }),
      });

      setOrdersList([
        res.data,
        ...ordersList.filter((order) => order._id !== id),
      ]);
    } catch (err) {
      console.log(err);
  
    }
  };

First Layer Component Receiving props and function

const OrderList = (props) => {
  const orders = props.orders;

  return (
    <div>
      <h1 className={styles.heading}> Orders</h1>
      <hr />
      <table className={styles.orders}>
        <thead>
          <tr>
            <th>Order No</th>
            <th>Pizza</th>
            <th>Time Since Order</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          {orders.map((order, index) => (
            <SingleOrder
              key={order._id}
              _id={order._id}
              pizza={order.pizza}
              time={order.createdAt}
              status={order.orderstatus}
              onStatusHandler={props.onStatusHandler}
            />
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default OrderList;

2nd Layer Component Button calling function Note: IS this the correct way to call functions through 2 components so it is only executed onClick and does this propagate up through the layers...(() => {props.func(ID})

     <button
            type="submit"
            className={styles.changeStatus}
            onClick={() => props.onStatusHandler(props._id)}
          >
            Change status
          </button>

API page:

enter image description here


const handler = async (req, res) => {
  await dbConnect();

  if (req.method === "PUT") {
    try {
      console.log("IN THE PUT API");
      const order = await Order.findByIdAndUpdate(id, req.body, { new: true });
      res.status(200).json(JSON.stringify(order));
    } catch (err) {
      res.status(500).json(err);
      console.log(err);
    }
  }
};

Upvotes: 0

Views: 70

Answers (1)

Razvan Rusu
Razvan Rusu

Reputation: 91

It seems to me like this line is giving you your error:

const { URL } = process.env;

but, in fact, if you are using Next.js you don't actually need this part and can just do:

const res = await fetch("/api/orders/" + id, {...});

This should work because with Next.js your API and front-end will be on the same server.

If you need to use a process.env variable, make sure it is set up correctly - because this is what seems to be coming back as undefined. In next.config.js in your root directory, add a env field to nextConfig as follows:

const nextConfig = {
  reactStrictMode: true,
  env: {
    URL: "example_URL",
  }
}

module.exports = nextConfig;

This can then be accessed from any file with process.env.URL.

Upvotes: 1

Related Questions