Fetching Server State with TanStack Query (React Query) v5

import React from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import axios from 'axios';

export const QuotesTable = () => {
  const queryClient = useQueryClient();
  const { data: quotes, isLoading } = useQuery({
    queryKey: ['quotes'],
    queryFn: async () => (await axios.get('/api/quotes')).data.data,
    staleTime: 1000 * 60 * 5,
  });

  const approveMutation = useMutation({
    mutationFn: (id) => axios.post(`/api/quotes/${id}/approve`),
    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['quotes'] }),
  });

  if (isLoading) return <div>Loading quotes...</div>;
  return (
    <div>
      {quotes?.map((q) => (
        <div key={q.id} className="p-3 border-b flex justify-between">
          <span>{q.client_name} - KES {q.total_amount}</span>
          <button onClick={() => approveMutation.mutate(q.id)} className="btn-primary">Approve</button>
        </div>
      ))}
    </div>
  );
};