React Query (TanStack Query) for server state management

// main.tsx — wrap app with QueryClientProvider
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 60 * 1000,  // 1 minute before refetch
      retry: 2,
      refetchOnWindowFocus: false,
    },
  },
});

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Router />
    </QueryClientProvider>
  );
}

// hooks/useTraces.ts
import { useQuery, useMutation, useQueryClient, useInfiniteQuery } from '@tanstack/react-query';

export function useTrace(id: string) {
  return useQuery({
    queryKey: ['traces', id],
    queryFn: () => api.getTrace(id),
    enabled: !!id,  // Don't run if id is empty
  });
}

export function useSearchTraces(query: string) {
  return useQuery({
    queryKey: ['traces', 'search', query],
    queryFn: () => api.searchTraces(query),
    enabled: query.length >= 2,
    placeholderData: previousData => previousData,  // Keep previous results while loading
  });
}

export function useCreateTrace() {
  const queryClient = useQueryClient();
  return useMutation({
    mutationFn: (data: CreateTraceRequest) => api.createTrace(data),
    onSuccess: (newTrace) => {
      // Invalidate and refetch the traces list
      queryClient.invalidateQueries({ queryKey: ['traces'] });
      // Optimistically add to cache
      queryClient.setQueryData(['traces', newTrace.id], newTrace);
    },
  });
}

// Component usage
function TraceDetail({ id }: { id: string }) {
  const { data: trace, isLoading, error } = useTrace(id);
  const { mutate: createTrace, isPending } = useCreateTrace();

  if (isLoading) return <Skeleton />;
  if (error) return <ErrorBoundary error={error} />;
  return <TraceCard trace={trace} />;
}