Re-rendering front end to automatically display updates from local API payload.update

[wrobson-lllow]

I have several collections whose fields get updated via the local API when changes are made in other collections. Is there a simple way to have the collections that were updated re-render to display the changes without manually refreshing? I also have some custom react components that I would like the same to happen with, would the custom components need to be updated via server-sent events or is there a strategy provided by payload?

[isaackoz]

Would like to see this as well. I have a few collections that have relations to other collections. If I edit/update the relationship field collection (where the side drawer opens up) and save it, it would be nice if there was a way to refresh the original collections data. This is an issue because if the saved collection modifies the original collection, and the user saves the original collection, it will overwrite the collections data with whatever data was in the current state. This could also be a problem if the collection is updated elsewhere (Rest API for example) and the user saves the collection after it's already loaded. It would overwrite the previous data with the stale form data.

Assuming Payload doesn't already have server-sent events or other strategies built in already, you would likely have to build a custom socket.io server within payload. You could have it fire events after every "afterChange" hook and update your front-end form fields using useAllFormFields().

I came up with an alternative solution for my problem if it helps anyone. I made a custom save button that checks for updated data and warns the user if it's different. When the doc loads (or when save button is mounted more specifically), it will store the documents data in state. Then when the user saves the doc, it will fetch the most recent data and compare it to the data on load. This way, if an API updates a user's "Orders" while an admin is editing said user, the admin would be warned if they tried to save the user doc.

import * as React from "react";
import { CustomSaveButtonProps } from "payload/types";
import { useForm } from "payload/components/forms";
import { useDocumentInfo } from "payload/components/utilities";

export const CustomSaveButton: CustomSaveButtonProps = () => {
	const [originalDocument, setOriginalDocument] = React.useState(undefined);

	// note: hooks are not allowed to be called inside useEffect or useCallback
	const docInfo = useDocumentInfo();
	const formData = useForm();

	// get the original document on component mount
	React.useEffect(() => {
		(async () => {
			if (docInfo) {
				setOriginalDocument(await getUpToDateDocument());
			}
		})();
	}, []);

	// get the most up to date document
	const getUpToDateDocument = React.useCallback(async () => {
		try {
			const data = await fetch(`/api/${docInfo.slug}/${docInfo.id}`);
			return data.json();
		} catch (e) {
			throw new Error(
				`Error checking for most up to date document: ${e}`
			);
		}
	}, [docInfo.slug, docInfo.id]);

	const submitHandler = async () => {
		// get the most up to date document
		const recentDocument = await getUpToDateDocument();

		// compare the document that was originally loaded with the most up to date document from the server
		if (
			JSON.stringify(originalDocument) !== JSON.stringify(recentDocument)
		) {
			let c = confirm(
				"Document has changed since you opened it. Are you sure you want to save? By saving, you will overwrite changes made by the user. If you want to keep the user's changes, click cancel and refresh the page."
			);
			if (c) {
				formData.submit();
			} else {
				return;
			}
		} else {
			formData.submit();
		}
	};

	return (
		<button
			onClick={submitHandler}
			type="button"
			style={{
				padding: "1rem 2rem",
				backgroundColor: "#fff",
				color: "#000",
			}}
		>
			Save
		</button>
	);
};

[wrobson-lllow]

@isaackoz Please excuse my late reply. But I really appreciate the thought out response. I will most likely be implementing something very similar.