GraphQL Codegen + WooGraphQL: 유형 WooCommerce 쿼리

이 튜토리얼에서는 GraphQL-Codegen 및 WPGraphQL/WooGraphQL을 사용하여 WordPress-powered eCommerce 사이트에 대한 간단한 제품 페이지를 만들 수 있습니다. GraphQL-Codegen의 도움으로 쿼리 및 mutations에 대한 TypeScript 유형 정의 및 React 구성 요소를 생성하는 데 중점을 둡니다.typescript·react-typescript플러그인.

우리는 WooGraphQL을 사용하여 데이터를 검색하는 제품 페이지를 생성하는 단계별 사례 연구를 만들 것입니다. 이 튜토리얼의 끝에 GraphQL-Codegen 및 WPGraphQL/WooGraphQL을 사용하여 효율적이고 유연한 전자 상거래 응용 프로그램을 구축하는 방법을 더 잘 이해할 수 있습니다.

자주 묻는 질문

WPGraphQL 및 WooGraphQL 플러그인이있는 WordPress 사이트 설치 및 활성화
GraphQL 및 React의 기본 이해

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디렉토리 및 aGetProduct.graphql안쪽에 파일:

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

이 쿼리는 이름, 설명, 이미지, 일반 가격 및 판매 가격을 포함하여 제품 데이터를 fetches.

단계 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구성 요소는 수신productIdas a prop and uses useQuery hook from Apollo Client to fetch 제품 데이터 사용GetProduct이름 * 그런 다음 제품 이름, 이미지, 설명, 가격, 판매 가격과 함께 사용할 수 있습니다.

단계 6: 당신의 신청에 ProductPage 성분을 통합하십시오

이제 가져올 수 있고 사용ProductPage당신의 신청에 있는 성분. 패스워드productId원하는 제품의 ID를 가진 버팀대, 성분은 제품 세부사항을 표시할 것입니다.

GraphQL Codegen 및 WooGraphQL과 함께 지상 실행