loki-usefetch

import React from 'react';
import { useFetch } from 'loki-usefetch';

const TestComponent = () => {
  const [currentPage, setCurrentPage] = useState(1);

  // Use the useFetch hook with the API URL and current page
  const { data, isLoading, isError, refetch } = useFetch<DataItem>(
    'https://example-api.com/data',
    currentPage
  );

  // Define the type/interface representing your data item
  interface DataItem {
    id: number;
    name: string;
    // Add other properties as needed
  }

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

  if (isError) {
    return (
      <div>
        <div>Error: {isError}</div>
        <button onClick={() => refetch(currentPage)}>Retry</button>
      </div>
    );
  }

  return (
    <div>
      {data && data.map((item) => <div key={item.id}>{item.name}</div>)}
      <button onClick={() => setCurrentPage((prevPage) => prevPage + 1)}>Next Page</button>
      <button onClick={() => refetch(currentPage)}>Refresh Data</button>
    </div>
  );
};

export default TestComponent;