Next.js Discord

Discord Forum

Fetched data stays static when uploaded to vercel. How do i do it?

Unanswered
tree🌳 posted this in #help-forum
Open in Discord
tree🌳OP
I have a marketTable component that fetches data from mongoDB and display all the items on the table. It works fine on local, well... fine, if i switch between components and go back to it i can see that the item is gone if i purchase it.

However when i deployed the project to see if everything is working fine i realised that the fetched data never changes. Even if i buy an item although i can see it on the console being purchased, the item never gets removed from the table. 
"use client";
import React, { useState, useEffect } from "react";
import MarketItemRow from "./MarketItemRow";

const MarketTable = () => {
  const [marketData, setMarketData] = useState([]);

  useEffect(() => {

    const fetchData = async () => {
      try {
        const response = await fetch("/api/getmarketplace");
        console.log("response is being called!");

        const data = await response.json();
        setMarketData(data);
      } catch (error) {
        console.error("Error fetching marketplace data:", error);
      }
    };

    fetchData();
  }, []);

  return (
    <div className="section flex justify-center items-center">
      <table className="overflow-hidden text-lg table-fixed border border-slate-500 text-light-text dark:text-light-text w-4/5 rounded-lg">
        <tbody>
          <tr className="text-dark-text dark:text-light-text bg-dark-background dark:bg-light-background">
            <th className="border border-slate-600">Item</th>
            <th className="border border-slate-600">Rarity</th>
            <th className="border border-slate-600">Quantity</th>
            <th className="border border-slate-600">Price/u.</th>
            <th className="border border-slate-600">Purchase</th>
          </tr>
          {marketData.map((item, index) => (
            <MarketItemRow key={index} item={item} />
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default MarketTable;

14 Replies

tree🌳OP
Also the parent has "use client" because i wanted to have a useState there
"use client";
// react
import { useState } from "react";
//next-auth
import { useRouter } from "next/navigation";
import { useSession } from "next-auth/react";
//my components
import Title from "@/components/Title";
import MarketTable from "@/components/MarketPlace/MarketTable";
import SellTable from "@/components/MarketPlace/SellTable";

const Marketplace = () => {
  const [menu, setMenu] = useState<string>("buy");
  const { data: session } = useSession();
  const router = useRouter();

  const handleUploadRandomData = async () => {
    console.log("handleupload randomt data");
    try {
      if (!session) {
        alert("You cant push data unless you're logged in.");
        router.push("/");
      } else {
        await fetch("api/seedmarketplace", { method: "POST" });
        console.log(
          "Random data uploaded to MarketplaceTransactions collection."
        );
      }
    } catch (error) {
      console.error("Error uploading random data:", error);
    }
  };

  return (
    <div className="relative section w-full">
      <Title text="Marketplace" />
      <div className="absolute top-24 z-40 w-full flex items-center justify-center">
        <button
          className="py-4 mr-2 px-8 rounded-lg border-2 border-light-secondary text-2xl text-light-secondary bg-dark-primary"
          onClick={() => setMenu("buy")}
        >
          Buy
        </button>
        <button
          className="py-4 px-8 rounded-lg border-2 border-light-secondary text-2xl text-light-secondary bg-dark-primary"
          onClick={() => setMenu("sell")}
        >
          Sell
        </button>
      </div>
      {menu === "buy" ? (
        <>
          <MarketTable />
          <button onClick={handleUploadRandomData}>Upload Random Data</button>
        </>
      ) : (
        <>
          <SellTable />
        </>
      )}
    </div>
  );
};

export default Marketplace;
I messed up
:this_is_fine:
How can i get the data to be refreshed every time i make a purchase or sell an item to the marketplace ?
I've been reading about caching and revalidating but nothing works
@tree🌳 How can i get the data to be refreshed every time i make a purchase or sell an item to the marketplace ?
Clown
revalidateTag()/revalidatePath() combined with Router.refresh()
European sprat
start with fixing the client component thing we talked about in general
tree🌳OP
im on it 🫡
@Clown revalidateTag()/revalidatePath() combined with Router.refresh()
tree🌳OP
i understand that revalidatePath can go anywhere on the code right? I've been making some changes but i dont really understand how the revalidatePath works
this could just be my '/marketplace' right?
@tree🌳 I have a marketTable component that fetches data from mongoDB and display all the items on the table. It works fine on local, well... fine, if i switch between components and go back to it i can see that the item is gone if i purchase it. However when i deployed the project to see if everything is working fine i realised that the fetched data never changes. Even if i buy an item although i can see it on the console being purchased, the item never gets removed from the table. javascript "use client"; import React, { useState, useEffect } from "react"; import MarketItemRow from "./MarketItemRow"; const MarketTable = () => { const [marketData, setMarketData] = useState([]); useEffect(() => { const fetchData = async () => { try { const response = await fetch("/api/getmarketplace"); console.log("response is being called!"); const data = await response.json(); setMarketData(data); } catch (error) { console.error("Error fetching marketplace data:", error); } }; fetchData(); }, []); return ( <div className="section flex justify-center items-center"> <table className="overflow-hidden text-lg table-fixed border border-slate-500 text-light-text dark:text-light-text w-4/5 rounded-lg"> <tbody> <tr className="text-dark-text dark:text-light-text bg-dark-background dark:bg-light-background"> <th className="border border-slate-600">Item</th> <th className="border border-slate-600">Rarity</th> <th className="border border-slate-600">Quantity</th> <th className="border border-slate-600">Price/u.</th> <th className="border border-slate-600">Purchase</th> </tr> {marketData.map((item, index) => ( <MarketItemRow key={index} item={item} /> ))} </tbody> </table> </div> ); }; export default MarketTable;
tree🌳OP
if u check the code i sent i have map going there with just this. The important thing is the BuyModal component where i actually do the purchase
 const handleBuy = async () => {
    try {
      if (!session) {
        return new Response("You must be logged in to make a purchase", {
          status: 401,
        });
      } else {
        const userId = session?.user?.id;

        // Check if the user object contains the user's ID
        if (!userId) {
          console.error("User ID is not available in session.");
          return new Response("User ID is not available.", { status: 401 });
        }
        try {
          const response = await fetch("/api/buyitem", {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({
              itemIdentifier: item.itemIdentifier,
              quantity,
              userId: userId,
            }),
          });

          if (response.ok) {
            console.log("Buy response json:", await response.json());

            router.refresh();
          } else {
            console.error(
              "Error buying item. Response status:",
              response.status
            );
          }
        } catch (error) {
          console.error("Error buying item:", error);
        }
      }
    } catch (error) {
      console.error("Error buying item:", error);
    }
  };

This is the handle that pushes the item, its a bit chaotic but im working on it 😭
im a bit confused on where it should be added the refresh and the revalidatePath