Neste tutorial, vamos guiá-lo através do GraphQL-Codegen e WPGraphQL/WooGraphQL para criar uma página de produto simples para o seu site WordPress-powered eCommerce. Estaremos focando em gerar definições de tipo TypeScript e componentes React para consultas e mutações com a ajuda do GraphQL-Codegentypescriptereact-typescriptplugins.
Vamos criar um estudo de caso passo a passo para demonstrar o processo de criação de uma página de produto que recupera dados usando WooGraphQL. No final deste tutorial, você terá uma melhor compreensão de como usar o GraphQL-Codegen e o WPGraphQL/WooGraphQL para construir aplicativos de eCommerce eficientes e flexíveis.
Pré-requisitos
- Um site WordPress com WPGraphQL e WooGraphQL plugins instalados e ativados
- Uma compreensão básica de GraphQL e React
Passo 1: Instalar GraphQL-Codegen e plugins necessários
Primeiro, vamos instalar o GraphQL-Codegen e os plugins necessários:
npm install --save-dev @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/react-typescriptPasso 2: Configurar o código gráficoQL
Criar umcodegen.ymlarquivo na raiz do seu projeto com o seguinte conteúdo:
schema: 'https://your-wordpress-site.com/graphql'
documents: './src/**/*.graphql'
generates:
./src/generated/graphql.tsx:
plugins:
- typescript
- react-typescriptSubstituirhttps://your-wordpress-site.com/graphqlcom a URL do ponto final GraphQL do seu site WordPress.
Passo 3: Criar um.graphqlarquivo para sua consulta
Criar umsrc/queriesdiretório e aGetProduct.graphqlarquivo dentro dele:
query GetProduct($id: ID!) {
product(id: $id) {
id
name
description
image {
sourceUrl
}
... on SimpleProduct {
isOnSale
regularPrice
salePrice
}
... on VariableProduct {
isOnSale
regularPrice
salePrice
}
}
}Esta consulta obtém os dados do produto, incluindo o nome, descrição, imagem, preço regular e preço de venda.
Passo 4: Gerar TipoScript tipos e Reagir componentes
Execute o seguinte comando para gerar os tipos TypeScript e React componentes:
npx graphql-codegenO geradographql.tsxarquivo será localizado no./src/generateddirectório.
Passo 5: Criar o componente da página do produto
Agora, vamos criar um componente de página de produto que use os componentes e tipos de React gerados:
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>
);
}AProductPagecomponente recebe oproductIdcomo um adereço e usa o useQuery hook da Apollo Client para obter os dados do produto usando oGetProductconsulta. Em seguida, exibe o nome do produto, imagem, descrição e preço, juntamente com o preço de venda, se disponível.
Passo 6: Integrar o componente ProductPage em sua aplicação
Agora você pode importar e usar oProductPagecomponente na sua aplicação. Passar oproductIdadere com o ID do produto desejado, e o componente irá exibir os detalhes do produto.
Completando
Parabéns! Você usou com sucesso GraphQL-Codegen e WPGraphQL/WooGraphQL para criar uma página de produto simples para o seu site WordPress-powered eCommerce. Ao aproveitar o poder do GraphQL e TypeScript, você tornou sua aplicação mais eficiente e flexível.
No próximo post, cobriremos a criação do botão add to cart e sua funcionalidade, incluindo como lidar com produtos já no carrinho de compras. Fiquem ligados!
Leave a Reply