Naive sketch of mutation API

toggle.jsx

function getIsLiked(viewerId, entityId) {
  // hit a database or something
}

function toggleLikeStatus(viewerId, entityId) {
  // hit a database or something
  return !currentStatus;
}


function LikeButton({viewerId, entityId}) {
  const isLiked = getIsLiked(viewerId, entityId);

  // Somehow toggleHandle points to a generated endpoint that runs this handler
  // toggleHandleState is a serialized representation of the dependency array
  // updatedIsLiked points to the optimistic value, or new value
  const [toggleHandle, toggleHandleState, updatedIsLiked] = useServerMutationHandle(
    (viewerId, entityId) => toggleLikeStatus(viewerId, entityId), // returns new value
    () => !isLiked, // optional optimistic update
    [viewerId, entityId]
  );

  return (
    <form action="" method="POST">
      <input type="hidden" name="handler" value={toggleHandle} />
      <input type="hidden" name="state" value={toggleHandleState} />
      <button type="submit">{updatedIsLiked ?? isLiked ? 'Unlike' : 'Like'}</button>
    </form>
  );
}