Übung und Herausforderung: Daten Abrufen

Konzentrieren wir uns auf die nächste Komponente, LatestInvoices. Ihr Zweck ist es, die letzten fünf Rechnungen anzuzeigen, die chronologisch nach Datum sortiert sind.

Man könnte denken, dass dies mit JavaScript einfach zu erreichen ist. Wenn die App jedoch wächst und mehr Daten erscheinen, ist es vorzuziehen, das Sortieren und Begrenzen der Rechnungen mit SQL zu handhaben. Dieser Ansatz verhindert, dass das Frontend mit unnötigen Berechnungen überlastet wird.

Um die Funktion fetchLatestInvoices zu inspizieren, besuchen Sie bitte app/lib/data.ts.

Zurück zum Projekt

Wir werden die Funktion fetchLatestInvoices auf der Dashboard-Seite verwenden, um die neuesten Rechnungen abzurufen und sie mit der LatestInvoices-Komponente anzuzeigen.

Vergessen Sie nicht, app/ui/dashboard/latest-invoices.tsx zu besuchen und die bereitgestellte Benutzeroberfläche zu entkommentieren.

Herausforderung

Jetzt ist es Ihre Chance, die Daten abzurufen und die Informationen dem Benutzer zu präsentieren.

Hauptsächlich haben wir eine Card-Komponente auf der Dashboard-Seite. Ihre Aufgabe ist es, die Funktion fetchCardData zu importieren, die bereitstellt:

• numberOfSellers;
• numberOfInvoices;
• totalFulfilledInvoices;
• totalAwaitingInvoices.

Basierend auf den abgerufenen Daten, kommentieren Sie die entsprechende Card-Komponente aus.

Ergebnis

In der Praxis