AI & Agent Dev Bug Sandbox Back to Radar

Cron Job Status Not Refreshed After Toggle In Dashboard

In the Supabase dashboard, toggling a cron job's enabled/disabled switch from the table triggers a modal and a refresh, but the displayed status remains unchanged until the user manually clicks the refresh button at the top of the table.

mediumConfidence 75%React

Origin Analysis

The toggle handler updates the cron job status through a mutation but does not invalidate or refetch the cron list query with the correct query key, so React Query serves stale cached data after the mutation; the manual refresh button bypasses the cache and forces a network refetch.

1. Open the Supabase dashboard and navigate to the Cron Jobs page. 2. Toggle the enabled/disabled switch for any cron job in the table. 3. Confirm the toggle in the modal that opens. 4. Observe that the table refreshes but the status column still shows the old state. 5. Click the refresh button at the top of the table. 6. Observe that the status now correctly reflects the change.

Fixing Code Block

import { useQueryClient } from '@tanstack/react-query';

// Inside the component that handles the cron toggle
const queryClient = useQueryClient();

const handleToggleCron = async (cronId: string, newStatus: boolean) => {
  // Optimistically update the cache so UI reflects immediately
  queryClient.setQueryData(['cronJobs'], (oldData: CronJob[] | undefined) => {
    if (!oldData) return oldData;
    return oldData.map((cron) =>
      cron.id === cronId ? { ...cron, enabled: newStatus } : cron
    );
  });

  try {
    await updateCronStatus(cronId, newStatus);
    // Invalidate after successful mutation to ensure consistency
    await queryClient.invalidateQueries({ queryKey: ['cronJobs'] });
  } catch (error) {
    // Rollback optimistic update on failure
    queryClient.invalidateQueries({ queryKey: ['cronJobs'] });
    throw error;
  }
};

The fix adds explicit cache invalidation for the cron jobs query after the mutation completes. It also includes an optimistic update to immediately reflect the new status in the UI. The query key 'cronJobs' must match the key used by the list query; if a different key is used in the actual code, replace it accordingly.

Edge Case Audit

If the query key does not exactly match the one used by the cron list query, invalidation will not work and the stale display will persist. In concurrent toggling scenarios, multiple invalidations may cause extra network requests and slight flicker. If the mutation fails after the optimistic update, the rollback invalidates the query but may briefly show an incorrect state. To rollback safely, revert the code change and ensure the original refresh button still works; do not remove manual refresh without thorough testing.