Next.js Discord

Discord Forum

Update client component when server component data updates

Unanswered
Short-billed Dowitcher posted this in #help-forum
Open in Discord
Short-billed DowitcherOP
I have MongoDB change streams setup in a server component and I'm trying to update the client component with the new data. Whenever I get new data from the stream and update the client component, nothing happens.

This is my server component:
export default async function LogsPage() {
    let Logs: any[] = await GetLogs();

    Logs.watch().on("change", (change: any) => {
        switch (change.operationType) {
            case "insert":
                Logs = [change.fullDocument, ...Logs];
                break;
            case "update":
                Logs = Logs.map((log) =>
                    log._id === change.documentKey._id
                        ? change.fullDocument
                        : log
                );
                break;
            case "delete":
                Logs = Logs.filter((log) => log._id !== change.documentKey._id);
                break;
            default:
                break;
        }
    });

    return <CallLogsList logs={Logs} />;


I think the issue is that the variable isn't a state, but useState doen't work in server components. How would I update the client component with the updated data?

0 Replies