Chapters 61/71 built /projects/{id}/archive as a custom operation WITH Mercure publication – the frontend needs its OWN hook for that, EXACTLY like for ANY other mutation.

Writing the archive hook

import { useMutation, useQueryClient } from '@tanstack/react-query';
import { apiClient } from '../api/client';
import type { Project } from '../types/project';

export function useArchiveProject() {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: async (id: number) => {
      const response = await apiClient.post<Project>(`/projects/${id}/archive`);

      return response.data;
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['projects'] });
    },
  });
}

STRUCTURALLY IDENTICAL to useDeleteProject (chapter 84) – POST instead of DELETE, OTHERWISE the SAME pattern: mutate, then invalidateQueries.

Adding the button

function ArchiveProjectButton({ project }: { project: Project }) {
  const archiveProject = useArchiveProject();

  if (project.archived) {
    return <span>Archived</span>;
  }

  return (
    <button
      onClick={() => archiveProject.mutate(project.id)}
      disabled={archiveProject.isPending}
    >
      Archive
    </button>
  );
}

project.archived HIDES the button once a project is ALREADY archived – the frontend thereby MIRRORS EXACTLY the business rule that archive has NO effect anymore once archived is already true.

Mercure makes it visible in real time

THANKS TO the useMercure hook from chapter 82 (already registered on ProjectListPage), OTHER open tabs/users see the archive status IMMEDIATELY, WITHOUT the archive button being pressed THERE – EXACTLY the end-to-end connection FROM chapter 71 TO this button.