GraphQL Codegen + WooGraphQL: Demande de renseignements sur WooCommerce

Dans ce tutoriel, nous vous guiderons à travers l’utilisation de GraphQL-Codegen et WPGraphQL/WooGraphQL pour créer une page de produit simple pour votre site eCommerce WordPress. Nous nous concentrerons sur la génération de définitions de type TypeScript et de composants React pour les requêtes et mutations à l’aide de GraphQL-Codegentypescriptetreact-typescriptles plugins.

Nous allons créer une étude de cas étape par étape pour démontrer le processus de création d’une page produit qui récupère les données en utilisant WooGraphQL. À la fin de ce tutoriel, vous aurez une meilleure compréhension de la façon d’utiliser GraphQL-Codegen et WPGraphQL/WooGraphQL pour construire des applications eCommerce efficaces et flexibles.

Préalables

Un site WordPress avec des plugins WPGraphQL et WooGraphQL installés et activés
Une compréhension de base de GraphQL et de React

Étape 1: Installer GraphQL-Codegen et les plugins requis

Tout d’abord, installons GraphQL-Codegen et les plugins requis:

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

Étape 2: Configurer GraphQL-Codegen

Créer uncodegen.ymlfichier dans la racine de votre projet avec le contenu suivant:

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

Remplacerhttps://your-wordpress-site.com/graphqlavec l’URL du paramètre GraphQL de votre site WordPress.

Étape 3: Créer un`.graphql`fichier pour votre requête

Créer unsrc/queriesrépertoire et unGetProduct.graphqlfichier à l’intérieur :

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

Cette requête récupère les données du produit, y compris le nom, la description, l’image, le prix régulier et le prix de vente.

Étape 4: Générer des types de script de type et des composants de réaction

Exécutez la commande suivante pour générer les types TypeScript et les composants React :

npx graphql-codegen

Le produitgraphql.tsxfichier sera situé dans le./src/generatedrépertoire.

Étape 5: Créer le composant de page de produit

Maintenant, créons un composant de page de produit qui utilise les composants et types React générés:

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>
  );
}

LesProductPagecomposante reçoit leproductIdcomme un accessoire et utilise le crochet useQuery d’Apollon Client pour récupérer les données du produitGetProductrequête. Il affiche ensuite le nom du produit, l’image, la description et le prix, ainsi que le prix de vente si disponible.

Étape 6: Intégrer le composant ProductPage dans votre application

Maintenant vous pouvez importer et utiliser leProductPagecomposant dans votre demande. Passez leproductIdapp avec l’ID du produit désiré, et le composant affichera les détails du produit.

Enroulement

Félicitations ! Vous avez utilisé avec succès GraphQL-Codegen et WPGraphQL/WooGraphQL pour créer une page de produit simple pour votre site de commerce électronique sous WordPress. En exploitant la puissance de GraphQL et de TypeScript, vous avez rendu votre application plus efficace et flexible.

Dans le prochain post, nous couvrirons la création du bouton d’ajout au panier et de sa fonctionnalité, y compris la façon de gérer les produits déjà dans le panier. Restez au courant !

Appuyez sur le sol avec GraphQL Codegen et WooGraphQL