图QL 代码源 + WooGraphQL: 已键入 WooCommerce 查询

在此教程中, 我们将引导您使用 GraphQL- Codegen 和 WPGraphQL/ WooGraphQL 为您的 WordPress 驱动的 eCommerce 网站创建简单的产品页面。我们将专注于在GraphQL-Codegen的帮助下生成TypeScript类型定义和用于查询和突变的回放组件typescript和react-typescript插件。

我们将建立一个分步骤的案例研究,以展示创建使用WooGraphQL检索数据的产品页面的过程. 到本教程结束时,您将更好地理解如何使用GraphQL-Codegen和WPGraphQL/WooGraphQL来构建高效而灵活的eCommerce应用程序.

先决条件

装有 WPGraphQL 和 WooGraphQL 插件的 WordPress 站点
对图QL和反应的基本理解

步骤1:安装图QL- 代码和所需的插件

首先,让我们安装GraphQL-Codegen和所需的插件:

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

第2步:配置图形QL-代码

创建一个codegen.yml在您的工程根中包含以下内容的文件 :

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

替换https://your-wordpress-site.com/graphql与 WordPress 站点 GraphQL 端点的 URL 连接。

第3步: 创建`.graphql`用于查询的文件

创建一个src/queries目录和 aGetProduct.graphql文件内 :

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

此查询可获取产品数据,包括名称、描述、图像、正常价格和销售价格。

第4步:生成类型脚本类型和反应组件

运行以下命令生成 TypeScript 类型和反应组件 :

npx graphql-codegen

生成的graphql.tsx文件将位于./src/generated目录。

步骤5:创建产品页面组件

现在,让我们创建一个产品页面组件,使用生成的 React 组件和类型:

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

这个ProductPage组件收到productId作为道具并使用阿波罗客户端的查询钩来取取出产品数据GetProduct查询。然后显示产品名称、图像、描述和价格,以及现有的销售价格。

步骤6:将产品页组件纳入您的应用程序

现在你可以导入和使用ProductPage应用程序中的组件。通过productId道具有所期望的产品ID,组件会显示产品细节.

包装

祝贺你! 您已成功使用 GraphQL- Codegen 和 WPGraphQL/ WooGraphQL 为您的 WordPress 驱动的 eCommerce 网站创建了简单的产品页面。通过利用 GraphQL 和 TypeScript 的力量, 您的应用效率更高, 更灵活。

在下一个员额中,我们将包括创建推车按钮的附加及其功能,包括如何处理已经放在购物车内的产品。继续听!

以 GraphQL 码源和 WooGraphQL 键入地表运行