react-query-quick-start.jsx

function requestTodos() {
  return axios.get("/todos"); // or a different request function that throws on an error
}
 
// A query provider is a
function Todos() {
  const { data, status, error } = useQuery("todos", requestTodos);
 
  if (status === "loading") {
     return <span>Loading...</span>;
  }
 
  if (status === "error") {
     return <span>Error: {error.message}</span>;
  }
 
  return (
     <div className="list-wrapper">
        {data.map((todo) => (
           <Todo todo={todo} />
        ))}
     </div>
  );
}