1

I have data, and for this example it is displayed in two ways. Firstly data is displayed on the server component. The second is data is passed down to a client component, and rendered inside of the client component. If the data changes, and I use either revalidatePath and router.refresh() only the data displayed inside of the server component works. So even though the props change for the client component, the client component is not re-rendered.

import AddForm from "./AddForm";
import { Fund, PartnerData, fundCollection } from "@/lib/mongodb";
import ManageTable from "./table";
import { revalidatePath } from "next/cache";
import { WithId } from "mongodb";

export default async function Manage() {
  var funds;
  var fund: WithId<Fund>;
  try {
    console.log("refetchign");
    funds = await (await fundCollection).find({ name: "fund_name" }).toArray();
    fund = funds[0];
    console.log(fund.partners);
  } catch (e) {
    console.log("ERROR", e);
  }

  return (
    <div>
      //On revalidatePath or router.refresh(), this updates to correct value
      {JSON.stringify(fund!.partners)}
      //This is a client component. Data passed as props. This does not update to the correct value
      <ManageTable rows={fund!.partners} />
    </div>
  );
}

I expect that the fund!.partners be the same inside the server component, and the client component.

Max K
  • 41
  • 4
  • Could you provide the client component code? Also please add description to the code block like \```typescript or \```javascript so it can enable the text highlighting. – Azvya Erstevan Jun 15 '23 at 07:45

0 Answers0