MyRenderingComponent.jsx

import { QueryClient, QueryClientProvider, useQuery } from "react-query";

const queryClient = new QueryClient();

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

function MyRenderingComponent() {
  const { isLoading, error, data } = useQuery("apiHello", () =>
    fetch("https://brunosabot.dev/api/hello/").then((res) => res.json())
  );

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>An error has occurred</div>;
  
  return <div>{data.name}</div>;
}