En este tutorial, le guiaremos a través de GraphQL-Codegen y WPGraphQL/WooGraphQL para crear una página de producto simple para su sitio de eCommerce impulsado por WordPress. Nos enfocaremos en generar definiciones de tipo TipoScript y Reactar componentes para consultas y mutaciones con la ayuda de GraphQL-Codegentypescriptyreact-typescriptplugins.
Crearemos un estudio de caso paso a paso para demostrar el proceso de crear una página de producto que recupera datos usando WooGraphQL. Al final de este tutorial, usted tendrá una mejor comprensión de cómo utilizar GraphQL-Codegen y WPGraphQL/WooGraphQL para construir aplicaciones de eCommerce eficientes y flexibles.
Prerrequisitos
- Un sitio de WordPress con plugins WPGraphQL y WooGraphQL instalados y activados
- Una comprensión básica de GraphQL y React
Paso 1: Instalar GraphQL-Codegen y los plugins necesarios
Primero, vamos a instalar GraphQL-Codegen y los plugins necesarios:
npm install --save-dev @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/react-typescriptPaso 2: Configure GraphQL-Codegen
Crear uncodegen.ymlarchivo en la raíz de su proyecto con el siguiente contenido:
schema: 'https://your-wordpress-site.com/graphql'
documents: './src/**/*.graphql'
generates:
./src/generated/graphql.tsx:
plugins:
- typescript
- react-typescriptReemplazamientohttps://your-wordpress-site.com/graphqlcon la URL del punto final GraphQL de tu sitio WordPress.
Paso 3: Crear un.graphqlarchivo para su consulta
Crear unsrc/queriesdirectorio y unGetProduct.graphqlarchivo dentro de él:
query GetProduct($id: ID!) {
product(id: $id) {
id
name
description
image {
sourceUrl
}
... on SimpleProduct {
isOnSale
regularPrice
salePrice
}
... on VariableProduct {
isOnSale
regularPrice
salePrice
}
}
}Esta consulta incluye los datos del producto, incluyendo el nombre, descripción, imagen, precio regular y precio de venta.
Paso 4: Generar tipos de script y Reactar componentes
Ejecute el siguiente comando para generar los tipos de TipoScript y Reaccionar componentes:
npx graphql-codegenEl generadographql.tsxarchivo se ubicará en./src/generateddirectorio.
Paso 5: Crear el componente de página de producto
Ahora, vamos a crear un componente de página de producto que utiliza los componentes y tipos de React generados:
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>
);
}ElProductPagecomponente recibe elproductIdcomo prop y utiliza el gancho useQuery de Apollo Client para buscar los datos del producto utilizando elGetProductconsulta. A continuación, muestra el nombre del producto, imagen, descripción y precio, junto con el precio de venta si está disponible.
Paso 6: Integrar el componente ProductPage en su aplicación
Ahora usted puede importar y utilizar elProductPagecomponente en su aplicación. Pase elproductIdPropietario con el ID del producto deseado, y el componente mostrará los detalles del producto.
Subiendo
¡Enhorabuena! Usted ha utilizado con éxito GraphQL-Codegen y WPGraphQL/WooGraphQL para crear una página de producto simple para su sitio de eCommerce impulsado por WordPress. Al aprovechar el poder de GraphQL y TypeScript, usted ha hecho su aplicación más eficiente y flexible.
En el próximo post, cubriremos la creación del botón Añadir al carrito y su funcionalidad, incluyendo cómo manejar productos ya en el carrito de compras. ¡No te muevas!
Leave a Reply