Die Produktliste laden

Mit sicher abgelegtem Integration-Token bauen wir jetzt das Herzstück der App: eine zentrale API-Client-Datei und die erste Version der Produktliste mit ECHTEN Magento-Daten.

src/api/magentoApi.js: ein zentraler API-Client

ALLE Magento-Aufrufe der App laufen über EINE Datei – so bleibt der Bearer-Token-Header an genau EINER Stelle definiert, statt in jeder Komponente wiederholt zu werden:

src/api/magentoApi.js

const BASE_URL = import.meta.env.VITE_MAGENTO_BASE_URL;
const ACCESS_TOKEN = import.meta.env.VITE_MAGENTO_ACCESS_TOKEN;

async function magentoFetch(path) {
  const response = await fetch(`${BASE_URL}${path}`, {
    headers: {
      Authorization: `Bearer ${ACCESS_TOKEN}`,
    },
  });

  if (!response.ok) {
    throw new Error(`Magento API Fehler: ${response.status}`);
  }

  return response.json();
}

export async function fetchProducts() {
  const data = await magentoFetch('/products?searchCriteria[pageSize]=12');
  return data;
}

Achtung: Beachten Sie: searchCriteria[pageSize]=12 steht hier bewusst OHNE URL-Kodierung der eckigen Klammern (anders als im rohen curl-Aufruf aus Kapitel 3) – der Browser bzw. fetch kodiert die URL beim tatsächlichen Absenden automatisch korrekt. Sie müssen das nicht von Hand tun.

pages/ProductListPage.jsx: erste Version

src/pages/ProductListPage.jsx

import { useEffect, useState } from 'react';
import { fetchProducts } from '../api/magentoApi';

function ProductListPage() {
  const [produkte, setProdukte] = useState([]);
  const [ladend, setLadend] = useState(true);

  useEffect(() => {
    async function laden() {
      const data = await fetchProducts();
      setProdukte(data.items);
      setLadend(false);
    }
    laden();
  }, []);

  if (ladend) {
    return <p>Lade Produkte...</p>;
  }

  return (
    <div>
      <h1>Produkte</h1>
      <ul>
        {produkte.map((produkt) => (
          <li key={produkt.sku}>
            {produkt.name} — {produkt.price} €
          </li>
        ))}
      </ul>
    </div>
  );
}

export default ProductListPage;

src/App.jsx

import ProductListPage from './pages/ProductListPage';

function App() {
  return <ProductListPage />;
}

export default App;

Starten Sie npm run dev neu (wegen der .env-Änderungen aus Kapitel 6) und öffnen Sie die App – Sie sollten jetzt eine EINFACHE, aber ECHTE Liste Ihrer Magento-Produktnamen und -Preise sehen.

Ein erster Blick auf die Datenqualität: price kann fehlen

Je nach Produkttyp liefert Magento price nicht IMMER als einfache Zahl – Konfigurierbare Produkte etwa haben oft price: 0 auf oberster Ebene, der tatsächliche Preis steckt in custom_attributes oder wird erst über den Preisindex berechnet. Für dieses Tutorial arbeiten wir mit einfachen ("Simple") Produkten, bei denen price direkt nutzbar ist – ein guter Hinweis, TESTDATEN in Ihrem Shop zu prüfen, falls Preise als 0 oder null erscheinen.