グラフQLコードゲン+WooGraphQL: タイプされたWooCommerce Queries

このチュートリアルでは、GraphQL-CodegenとWPGraphQL/WooGraphQLを使用して、WordPress搭載のeCommerceサイト用のシンプルな製品ページを作成します。 GraphQL-Codegenの助けを借りて、クエリと変異のためのTypeScript型定義とReactコンポーネントの生成に焦点を当てますtypescriptそして、react-typescriptプラグイン。

WooGraphQLを使ってデータを取り出す製品ページを作成するプロセスを実証するために、ステップバイステップのケーススタディを作成します。このチュートリアルの最後に、GraphQL-CodegenとWPGraphQL/WooGraphQLを使用して、効率的で柔軟なeCommerceアプリケーションを構築する方法のより良い理解が得られます。

前提条件

WPGraphQL と WooGraphQL プラグインがインストールしてアクティブに WordPress サイト
グラフQLと反応の基本的な理解

ステップ1: GraphQL-Codegenと必要なプラグインをインストールする

まず、GraphQL-Codegenと必要なプラグインをインストールしてみましょう。

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

ステップ2:GraphQL-Codegenの設定

作成する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/graphqlWordPressサイトのGraphQLエンドポイントのURLで。

ステップ3:作成する`.graphql`クエリのファイル

作成するsrc/queriesディレクトリとディレクトリGetProduct.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タイプとReactコンポーネントの生成

TypeScript 型と React コンポーネントを生成するには、次のコマンドを実行します。

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コンポーネントは、productIdprop として、Apollo Client から useQuery ホックを使用して、製品データを取得できます。GetProductお問い合わせ製品の名称、画像、説明、価格、販売価格など、販売価格も表示します。

ステップ6:製品ページコンポーネントをアプリケーションに統合

今、あなたはインポートし、使用することができますProductPageアプリケーション内のコンポーネント。パスproductId目的の製品 ID でプロップし、コンポーネントは製品の詳細を表示します。

ラップアップ

おめでとうございます! GraphQL-CodegenとWPGraphQL/WooGraphQLを使用して、WordPress搭載のeコマースサイトのシンプルな製品ページを作成できます。 GraphQLとTypeScriptのパワーを活用することで、アプリケーションをより効率的かつ柔軟にしました。

次の記事では、カートに入れるボタンとその機能を追加し、ショッピングカートに既に製品を取り扱います。お楽しみに!

グラフQLコードゲンとWooGraphQLでグランドランニングをヒット