GraphQL Codegen + WooGraphQL: Typisierte WooCommerce-Abfragen

In diesem Tutorial führen wir Sie durch die Verwendung von GraphQL-Codegen und WPGraphQL / WooGraphQL, um eine einfache Produktseite für Ihre WordPress-basierte E-Commerce-Website zu erstellen. Wir werden uns auf die Erstellung von TypeScript-Typdefinitionen und React-Komponenten für Abfragen und Mutationen mit Hilfe von GraphQL-Codegen konzentrieren.typescriptundreact-typescriptPlugins.

Wir werden eine schrittweise Fallstudie erstellen, um den Prozess der Erstellung einer Produktseite zu demonstrieren, die Daten mit WooGraphQL abruft. Am Ende dieses Tutorials haben Sie ein besseres Verständnis dafür, wie Sie GraphQL-Codegen und WPGraphQL / WooGraphQL verwenden, um effiziente und flexible E-Commerce-Anwendungen zu erstellen.

Voraussetzungen

Eine WordPress Seite mit WPGraphQL und WooGraphQL Plugins installiert und aktiviert
Ein grundlegendes Verständnis von GraphQL und React

Schritt 1: Installieren Sie GraphQL-Codegen und erforderliche Plugins

Lassen Sie uns zunächst GraphQL-Codegen und die erforderlichen Plugins installieren:

npm install --save-dev @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/react-typescript

Schritt 2: Konfigurieren von GraphQL-Codegen

Erstellen einescodegen.ymlDatei im Stamm Ihres Projekts mit folgendem Inhalt:

schema: 'https://your-wordpress-site.com/graphql'
documents: './src/**/*.graphql'
generates:
  ./src/generated/graphql.tsx:
    plugins:
      - typescript
      - react-typescript

Ersetzenhttps://your-wordpress-site.com/graphqlmit der URL des GraphQL-Endpunkts Ihrer WordPress-Site.

Schritt 3: Erstellen eines`.graphql`Datei für Ihre Abfrage

Erstellen einessrc/queriesVerzeichnis und einGetProduct.graphqlDatei darin:

query GetProduct($id: ID!) {
  product(id: $id) {
    id
    name
    description
    image {
      sourceUrl
    }
    ... on SimpleProduct {
      isOnSale
      regularPrice
      salePrice
    }
    ... on VariableProduct {
      isOnSale
      regularPrice
      salePrice
    }
  }
}

Diese Abfrage holt die Produktdaten ab, einschließlich Name, Beschreibung, Bild, regulärer Preis und Verkaufspreis.

Schritt 4: TypScript-Typen und React-Komponenten erzeugen

Führen Sie den folgenden Befehl aus, um die TypeScript-Typen und React-Komponenten zu erzeugen:

npx graphql-codegen

Die erzeugtegraphql.tsxDie Datei befindet sich im./src/generatedVerzeichnis.

Schritt 5: Erstellen der Produktseitenkomponente

Lassen Sie uns nun eine Produktseitenkomponente erstellen, die die generierten React-Komponenten und -Typen verwendet:

import { GetProduct } from '../generated/graphql';
import { useQuery } from '@apollo/client';

function ProductPage({ productId }) {
  const { loading, error, data } = useQuery(GetProduct, {
    variables: { id: productId },
  });

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  const { product } = data;

  return (
    <div>
      <h1>{product.name}</h1>
      <img src={product.image.sourceUrl} alt={product.name}/>
      <p>{product.description}</p>
      {product.isOnSale ? (
        <p>
          <del>{product.regularPrice}</del> {product.salePrice}
        </p>
      ) : (
        <p>{product.regularPrice}</p
      )}
    </div>
  );
}

DieProductPageDie Komponente erhält dieproductIdals Prop und verwendet den useQuery-Hook von Apollo Client, um die Produktdaten mit demGetProductAbfrage. Es zeigt dann den Produktnamen, das Bild, die Beschreibung und den Preis zusammen mit dem Verkaufspreis an, falls verfügbar.

Schritt 6: Integrieren Sie die ProductPage-Komponente in Ihre Anwendung

Jetzt können Sie importieren und verwenden Sie dieProductPageKomponente in Ihrer Anwendung. Passieren Sie dieproductIdProp mit der ID des gewünschten Produkts, und die Komponente zeigt die Produktdetails an.

Umhüllen

Herzlichen Glückwunsch! Sie haben GraphQL-Codegen und WPGraphQL/WooGraphQL erfolgreich verwendet, um eine einfache Produktseite für Ihre WordPress-basierte E-Commerce-Website zu erstellen. Durch die Nutzung der Leistungsfähigkeit von GraphQL und TypeScript haben Sie Ihre Anwendung effizienter und flexibler gestaltet.

Im nächsten Beitrag werden wir die Erstellung der Add-to-Cart-Taste und ihrer Funktionalität behandeln, einschließlich der Handhabung von Produkten, die sich bereits im Warenkorb befinden. Bleibt dran!

Hit the Ground Running mit GraphQL Codegen und WooGraphQL