React-Query Commits.tsx

App.tsx

// App.tsx:
import React from 'react';
import { QueryClient, QueryClientProvider } from 'react-query';
import { TotalCommitsCount } from './TotalCommitsCount';
import { Commits } from './Commits';

const queryClient = new QueryClient();

const App = () => (
  <QueryClientProvider client={queryClient}>
    <div>
      <h1>Local, Global, Async</h1>
      <TotalCommitsCount />
      <Commits />
    </div>
  </QueryClientProvider>
);

export default App;

Commits.tsx

// Commits.tsx
import React from 'react';
import { useQuery } from 'react-query';

interface Commit {
  sha: string;
  commit: {
    message: string;
    author: {
      name: string;
      date: string;
    };
  };
}

const fetchCommits = async (): Promise<Commit[]> => {
  const response = await fetch('https://api.github.com/repos/facebook/react/commits');
  
  // Did you know there's people that don't like try-catch + throwing exceptions?
  // Check it out if you can.
  if (!response.ok) throw new Error('Error fetching commits.');
  return response.json();
};

export const useCommits = () => {
  return useQuery<Commit[], Error>('commits', fetchCommits, {
    staleTime: 60_000, // Will refetch in the background after 1 minute
    cacheTime: 3_600_000, // Will call Garbage Collector to clean it after 1 hour of inactivity.
  });
};

export const Commits = () => {
  const { data: commits, isLoading, isError, error } = useCommits();

  if (isLoading) return <div>Loading commits...</div>;
  if (isError) return <div>Error: {error?.message || 'Unknown error.'}</div>;

  return (
    <div>
      <h2>Latest React Commits</h2>
      <ul>
        {commits?.map((commit) => (
          <li key={commit.sha}>
            <strong>{commit.commit.author.name}</strong>: {commit.commit.message.split('\n')[0]}
            <br />
            <small>{new Date(commit.commit.author.date).toLocaleString()}</small>
          </li>
        ))}
      </ul>
    </div>
  );
};

TotalCommitsCount.tsx

import React from 'react';
import { useCommits } from './useCommits';

export const TotalCommitsCount = () => {
  const { data: commits, isLoading, isError } = useCommits();

  if (isLoading) return <div>Loading commits...</div>;
  if (isError) return <div>Error fetching commits.</div>;

  return (
    <div>
      <h2>Total Commits:</h2>
      <p>{commits.length}</p>
    </div>
  );
};