Building a real-time departure board with TanStack Query: how it works, and why it was harder than expected

// app/routes/__root.tsx
const [queryClient] = useState(
  () =>
    new QueryClient({
      defaultOptions: {
        queries: {
          staleTime: 1000 * 25,
          refetchInterval: 1000 * 30,
          retry: 3,
          retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000),
        },
      },
    })
);

// src/hooks/useDepartures.ts
export function useDepartures() {
  return useQuery({
    queryKey: ["departures", "saint-gratien-bnf"],
    queryFn: fetchDepartures,
    refetchInterval: 30000,
    refetchIntervalInBackground: true,
    staleTime: 25000,
    retry: 3,
    retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000),
  });
}

// src/lib/api.ts
export interface Departure {
  id: string;
  aimedDepartureTime: string;
  expectedDepartureTime: string;
  destination: string;
  platform: string | null;
  status: "onTime" | "delayed" | "cancelled" | "early" | "missed";
  delay: number;
  line: string;
  isRealTime: boolean;
}

function parseSIRIResponse(data: SIRIResponse): Departure[] {
  const visits =
    data.Siri?.ServiceDelivery?.StopMonitoringDelivery?.[0]?.MonitoredStopVisit || [];

  return visits
    .map((visit, index): Departure => {
      const journey = visit.MonitoredVehicleJourney;
      const call = journey.MonitoredCall;

      const aimed = new Date(call.AimedDepartureTime);
      const expected = call.ExpectedDepartureTime
        ? new Date(call.ExpectedDepartureTime)
        : aimed;

      const delayMs = expected.getTime() - aimed.getTime();
      const delay = Math.round(delayMs / 60000);

      let status: Departure["status"] = "onTime";
      if (call.DepartureStatus === "cancelled") status = "cancelled";
      else if (call.DepartureStatus === "missed") status = "missed";
      else if (delay > 2) status = "delayed";
      else if (delay < -1) status = "early";

      return {
        id: `${journey.LineRef}-${index}-${call.AimedDepartureTime}`,
        aimedDepartureTime: call.AimedDepartureTime,
        expectedDepartureTime: call.ExpectedDepartureTime || call.AimedDepartureTime,
        destination: journey.DestinationName || "BnF",
        platform: call.DeparturePlatformName || call.ArrivalPlatformName || null,
        status,
        delay,
        line: journey.PublishedLineName || "C14",
        isRealTime: !!call.ExpectedDepartureTime,
      };
    })
    .filter((d) => /* ... ne garder que les départs vers la bonne destination */ true)
    .sort((a, b) => new Date(a.expectedDepartureTime).getTime() - new Date(b.expectedDepartureTime).getTime());
}

// src/hooks/useCountdown.ts
export function useCountdown(targetDate: string): number {
  const [minutes, setMinutes] = useState(() => {
    const now = new Date();
    const target = new Date(targetDate);
    return Math.max(0, Math.ceil((target.getTime() - now.getTime()) / 60000));
  });

  useEffect(() => {
    const interval = setInterval(() => {
      const now = new Date();
      const target = new Date(targetDate);
      const diff = target.getTime() - now.getTime();
      setMinutes(Math.max(0, Math.ceil(diff / 60000)));
    }, 1000);

    return () => clearInterval(interval);
  }, [targetDate]);

  return minutes;
}