In questo tutorial, ti guideremo attraverso l’utilizzo di GraphQL-Codegen e WPGraphQL/WoooGraphQL per creare una pagina di prodotto semplice per il tuo sito WordPress-powered eCommerce. Ci concentreremo sulla generazione di definizioni di tipo TypeScript e componenti React per query e mutazioni con l’aiuto di GraphQL-Codegen’stypescriptereact-typescriptplugin.
Creeremo uno studio di caso passo per dimostrare il processo di creazione di una pagina di prodotto che recupera i dati utilizzando WooGraphQL. Alla fine di questo tutorial, avrai una migliore comprensione di come utilizzare GraphQL-Codegen e WPGraphQL/WoooGraphQL per costruire applicazioni eCommerce efficienti e flessibili.
Prerequisiti
- Un sito WordPress con WPGraphQL e plugin WooGraphQL installati e attivati
- Una comprensione di base di GraphQL e React
Passo 1: Installare GraphQL-Codegen e plugin richiesti
In primo luogo, installiamo GraphQL-Codegen e i plugin richiesti:
npm install --save-dev @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/react-typescriptFase 2: Configurare GraphQL-Codegen
Creare uncodegen.ymlfile nella radice del progetto con i seguenti contenuti:
schema: 'https://your-wordpress-site.com/graphql'
documents: './src/**/*.graphql'
generates:
./src/generated/graphql.tsx:
plugins:
- typescript
- react-typescriptSostituirehttps://your-wordpress-site.com/graphqlcon l’URL del tuo sito WordPress’s GraphQL endpoint.
Passo 3: Creare un.graphqlfile per la tua richiesta
Creare unsrc/queriesdirectory e unGetProduct.graphqlfile dentro di esso:
query GetProduct($id: ID!) {
product(id: $id) {
id
name
description
image {
sourceUrl
}
... on SimpleProduct {
isOnSale
regularPrice
salePrice
}
... on VariableProduct {
isOnSale
regularPrice
salePrice
}
}
}Questa query fetches i dati del prodotto, compreso il nome, descrizione, immagine, prezzo regolare e prezzo di vendita.
Passo 4: Generare tipi di script e componenti React
Eseguire il comando seguente per generare i tipi TypeScript e i componenti React:
npx graphql-codegenIl generatographql.tsxil file sarà situato nel./src/generateddirectory.
Passo 5: Creare il componente pagina del prodotto
Ora, creiamo un componente pagina prodotto che utilizza i componenti e i tipi React generati:
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>
);
}TheProductPagecomponente riceve ilproductIdcome prop e utilizza l’usoGià gancio da Apollo Client per recuperare i dati del prodotto utilizzandoGetProductquery. Viene quindi visualizzato il nome del prodotto, l’immagine, la descrizione e il prezzo, insieme al prezzo di vendita se disponibile.
Passo 6: Integrare il componente ProductPage nella tua applicazione
Ora è possibile importare e utilizzareProductPagecomponente nella vostra applicazione. Passare ilproductIdprop con l’ID del prodotto desiderato e il componente visualizzerà i dettagli del prodotto.
Condividi su Google
Congratulazioni! Hai usato con successo GraphQL-Codegen e WPGraphQL/WooGraphQL per creare una pagina di prodotto semplice per il tuo sito di eCommerce alimentato da WordPress. Levando la potenza di GraphQL e TypeScript, hai reso la tua applicazione più efficiente e flessibile.
Nel post successivo, copriremo la creazione del pulsante Aggiungi al carrello e la sua funzionalità, tra cui come gestire i prodotti già nel carrello. Restate in sintonia!
Leave a Reply