So fügen Sie GitHub-Beitragsstatistiken zu Ihrer React-App hinzu

Möchten Sie Ihre GitHub-Aktivitäten in Ihrem React-Portfolio präsentieren? In diesem Tutorial zeige ich Ihnen, wie Sie eine React-Komponente erstellen, die Ihre gesamten GitHub-Beiträge mithilfe der GraphQL-API von GitHub anzeigt, komplett mit effizientem Caching. Lasst uns etwas Cooles bauen! ?

Was wir bauen werden

Wir erstellen eine React-Komponente, die:

• Ruft Ihre GitHub-Beiträge von 2020 bis heute ab
• Beinhaltet sowohl öffentliche als auch private Beiträge
• Implementiert clientseitiges Caching, um die Leistung zu optimieren
• Zeigt beim Abrufen einen Ladestatus an
• Behandelt Fehler ordnungsgemäß

Voraussetzungen

Bevor wir beginnen, benötigen Sie:

1. Ein GitHub Personal Access Token (mit read:user-Bereich)
2. Ein React-Projekt eingerichtet (mit Create React App, Next.js oder Ihrem bevorzugten Setup)
3. Grundkenntnisse über React-Hooks und asynchrone Operationen

Schritt 1: Einrichten des GitHub-Tokens

Erstellen Sie zunächst eine .env-Datei in Ihrem Projektstammverzeichnis und fügen Sie Ihr GitHub-Token hinzu:

NEXT_PUBLIC_GITHUB_TOKEN=your_github_token_here

Schritt 2: Erstellen des Dienstprogramms zum Datenabruf

Erstellen Sie eine neue Datei mit dem Namen githubApi.js:

export async function fetchGithubCommits(username) {
  const GITHUB_TOKEN = process.env.NEXT_PUBLIC_GITHUB_TOKEN;
  const CACHE_KEY = `github-commits-${username}`;
  const CACHE_TTL = 3600; // 1 hour in seconds

  if (!GITHUB_TOKEN) {
    console.error("No GitHub token found!");
    throw new Error("GitHub token is required");
  }

  const cachedData = getCachedData(CACHE_KEY);
  if (cachedData) {
    return cachedData.value;
  }

  try {
    const currentYear = new Date().getFullYear();
    const startYear = 2020;
    let totalCommits = 0;

    for (let year = startYear; year <= currentYear; year++) {
      const query = `
        query($username: String!, $from: DateTime!, $to: DateTime!) {
          user(login: $username) {
            contributionsCollection(from: $from, to: $to) {
              totalCommitContributions
              restrictedContributionsCount
            }
          }
        }
      `;

      const response = await fetch("https://api.github.com/graphql", {
        method: "POST",
        headers: {
          Authorization: `Bearer ${GITHUB_TOKEN}`,
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          query,
          variables: {
            username,
            from: `${year}-01-01T00:00:00Z`,
            to: `${year}-12-31T23:59:59Z`,
          },
        }),
      });

      const data = await response.json();
      if (data.errors) {
        throw new Error(data.errors[0].message);
      }

      const yearCommits =
        (data.data?.user?.contributionsCollection?.totalCommitContributions || 0) +
        (data.data?.user?.contributionsCollection?.restrictedContributionsCount || 0);

      totalCommits += yearCommits;
    }

    setCachedData(CACHE_KEY, totalCommits, CACHE_TTL);
    return totalCommits;
  } catch (error) {
    console.error("Error fetching GitHub commits:", error);
    throw error;
  }
}

function setCachedData(key, value, ttl) {
  const item = {
    value,
    timestamp: Date.now(),
    ttl: ttl * 1000,
  };
  localStorage.setItem(key, JSON.stringify(item));
}

function getCachedData(key) {
  try {
    const item = localStorage.getItem(key);
    if (!item) return null;

    const parsedItem = JSON.parse(item);
    const now = Date.now();

    if (now - parsedItem.timestamp > parsedItem.ttl) {
      localStorage.removeItem(key);
      return null;
    }

    return parsedItem;
  } catch {
    return null;
  }
}

export function invalidateCommitsCache(username) {
  localStorage.removeItem(`github-commits-${username}`);
}

Schritt 3: Erstellen der Reaktionskomponente

Erstellen Sie eine neue Datei mit dem Namen GitHubStats.js:

import React, { useState, useEffect } from 'react';
import { fetchGithubCommits } from './githubApi';

const GitHubStats = ({ username }) => {
  const [commits, setCommits] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchStats = async () => {
      try {
        setLoading(true);
        setError(null);
        const totalCommits = await fetchGithubCommits(username);
        setCommits(totalCommits);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchStats();
  }, [username]);

  if (loading) {
    return <div>Loading GitHub stats...</div>;
  }

  if (error) {
    return <div>Error: {error}</div>;
  }

  return (
    <div className="github-stats">
      <h2>GitHub Contributions</h2>
      <p>Total commits since 2020: {commits.toLocaleString()}</p>
    </div>
  );
};

export default GitHubStats;

Schritt 4: Stile hinzufügen

Lass uns ein paar grundlegende Stile hinzufügen. Erstellen Sie GitHubStats.css:

.github-stats {
  padding: 20px;
  border-radius: 8px;
  background-color: #f6f8fa;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin: 20px 0;
}

.github-stats h2 {
  margin: 0 0 15px 0;
  color: #24292e;
}

.github-stats p {
  font-size: 1.2em;
  color: #586069;
}

Schritt 5: Verwenden der Komponente

Jetzt können Sie die Komponente in Ihrer App verwenden:

import GitHubStats from './GitHubStats';

function App() {
  return (
    <div className="App">
      <h1>My Developer Portfolio</h1>
      <GitHubStats username="your-github-username" />
    </div>
  );
}

Besser machen: Erweiterte Funktionen

1. Hinzufügen einer Schaltfläche „Aktualisieren“.

Aktualisieren Sie GitHubStats.js, um eine manuelle Aktualisierungsoption aufzunehmen:

import React, { useState, useEffect } from 'react';
import { fetchGithubCommits, invalidateCommitsCache } from './githubApi';

const GitHubStats = ({ username }) => {
  // ... previous state declarations ...

  const handleRefresh = async () => {
    invalidateCommitsCache(username);
    await fetchStats();
  };

  return (
    <div className="github-stats">
      <h2>GitHub Contributions</h2>
      <p>Total commits since 2020: {commits.toLocaleString()}</p>
      <button onClick={handleRefresh} disabled={loading}>
        {loading ? 'Refreshing...' : 'Refresh Stats'}
      </button>
    </div>
  );
};

2. Hinzufügen einer Aufschlüsselung nach Jahren

Wir können die Komponente ändern, um Beiträge pro Jahr anzuzeigen:

NEXT_PUBLIC_GITHUB_TOKEN=your_github_token_here

Leistungstipps

1. Caching-Strategie: Die aktuelle Implementierung speichert Daten eine Stunde lang im Cache. Passen Sie CACHE_TTL entsprechend Ihren Anforderungen an.
2. Fehlergrenzen: Erwägen Sie, die Komponente in eine Fehlergrenze einzuschließen, um unerwartete Fehler ordnungsgemäß zu behandeln.
3. Ladezustände: Fügen Sie einen Skeleton-Loader anstelle eines einfachen „Laden…“-Textes für eine bessere UX hinzu.

Häufige Probleme und Lösungen

1. CORS-Probleme: Stellen Sie sicher, dass Sie den richtigen GitHub-API-Endpunkt und die richtigen Header verwenden.
2. Token-Berechtigungen: Stellen Sie sicher, dass Ihr GitHub-Token über die erforderlichen Berechtigungen verfügt.
3. Ratenbegrenzung: Behandeln Sie die API-Ratenbegrenzungen von GitHub, indem Sie die verbleibende Ratenbegrenzung in den Antwortheadern überprüfen.

---

Sie haben jetzt eine voll funktionsfähige GitHub-Statistikkomponente in Ihrer React-App! Diese Implementierung bietet eine solide Grundlage, auf der Sie aufbauen können. Einige Ideen zur Verbesserung:

• Fügen Sie weitere GitHub-Statistiken hinzu (wie Sterne, PRs, Probleme)
• Erstellen Sie visuelle Darstellungen mithilfe von Diagrammen
• Animationen zum Laden und Aktualisieren hinzufügen
• Eine detailliertere Fehlerbehandlung implementieren

Denken Sie daran, Ihr GitHub-Token sicher aufzubewahren und es niemals in Ihrem Repository festzuschreiben. Viel Spaß beim Codieren! ?

Das obige ist der detaillierte Inhalt vonSo fügen Sie GitHub-Beitragsstatistiken zu Ihrer React-App hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!