How to update props data on notification broadcast without page refresh? Vue3,Inertia

The csvs.index page displays a table of csvs with path, completed status, and download link. Csvs can have their export completed with all attributes or export incomplete with none of the attributes. When a Notification broadcast is received, the payload contains a csv's attributes needed to update an incomplete csv. The problem I have is understanding how to update my csvs props data when a notification is broadcast, without a page reload. From my understanding of Vue, you are not supposed to modify the props data.

// csvs.index page
const props = defineProps({
    csvs: {
        type: Object,
        required: true,
    },
});
useEchoNotification(
    `App.Models.User.${userId.value}`,
    (notification) => {
		// modify the csv with payload
        console.log(notification.csvId);
        console.log(notification.userId);
        console.log(notification.path);
    },
    "App.Notifications.ExportDatabaseCompleted",
);

<template v-for="csv in csvs.data" :key="csv.id">
    <TableText>{{ csv.id }}</TableText>
    <TableText>{{ csv.path }}</TableText>

The overall workflow may be irrelevant to the question. User requests a csv export. A csv export Job is queued up, and the user is redirected immediately to csvs.index page. After the job is completes or fails, a ExportDatabaseCompleted Notification is broadcast. The Notification carries a csv payload with the mentioned id, user id, path, etc. The Notification is caught in the csvs.index page.

Thank you for any help offered.

Shivamyadav

4 months ago

Level 20

You can try to only reload the csvs data when the broadcast event occurs

useEchoNotification(
    `App.Models.User.${userId.value}`,
    (notification) => {
        console.log(notification.csvId);
        console.log(notification.userId);
        console.log(notification.path);

        // Reload only the csvs prop from the server
        router.reload({
            only: ['csvs'],    // Reload just this prop from the controller
            preserveScroll: true,
            preserveState: true, 
        });
    },
    "App.Notifications.ExportDatabaseCompleted",
);

4 months ago

Level 1

Thanks for the reply Shiv. How would you display a toast notification? The only way I could think of is passing query parameters.

const props = defineProps({
    csvs: {
        type: Object,
        required: true,
    },
    success: {
        type: [Boolean, null],
        required: false,
    },
	updatedCsv: {
		type: Object,
		required: false,
	},
});
useEchoNotification(
    `App.Models.User.${userId.value}`,
    (notification) => {
        router.get(
            route("csvs.index"),
            {
                only: ['users'],
                success: true,
				csvId: notification.csvId,
            },
            {
                preserveScroll: true,
            },
        );
    },
    "App.Notifications.ExportDatabaseCompleted",
);

return Inertia::render('csvs/Index', [
            'csvs' => CsvResource::collection(Csv::latest()->paginate(15)),
            'success' => $request->query('success'),
            'updatedCsv' => Csv::find($request->query('csvId')),
]);

Shivamyadav

4 months ago

Level 20

You can directly show the toast notification from the echo . For example It depends on how you are displaying your toast notification to the user.

useEchoNotification(
    `App.Models.User.${userId.value}`,
    (notification) => {
// Show toast immediately
        toast.success(`CSV #${notification.csvId} export completed!`);
        router.get(
            route("csvs.index"),
            {
                only: ['users'],
                success: true,
				csvId: notification.csvId,
            },
            {
                preserveScroll: true,
            },
        );
    },
    "App.Notifications.ExportDatabaseCompleted",
);

Shivamyadav

4 months ago

Level 20

updated my reply.

Please or to participate in this conversation.