useQuery

import React from 'react';

import { useQuery } from 'react-query';

const fetchData = async () => {
  const response = await fetch('https://api.example.com/data');
  
  const data = await response.json();

  return data;
};

const MyComponent = () => {
  const { data, isLoading, isError, refetch } = useQuery('myData', fetchData);

  const handleRefresh = () => {
    refetch();
  };

  if (isLoading) {
    return <p>Loading...</p>;
  }

  if (isError) {
    return <p>Error fetching data</p>;
  }

  return (
    <div>
      <h1>Data:</h1>

      <button onClick={handleRefresh}>
        Refresh
      </button>

      <pre>
        {JSON.stringify(data, null, 2)}
      </pre>
    </div>
  );
};

export default MyComponent;