Shopify Storefront API에서 제품 가져오기

Next.js 프로젝트 설정

우선 다음 JS 프로젝트를 설정해 봅시다. 다음 명령으로 시작할 수 있습니다. 내 프로젝트에 Typescript를 사용했지만 원하는 경우 JavaScript를 사용할 수 있습니다.

yarn create next-app --typescript

또한 스타일링을 위한 Mantine 구성 요소 라이브러리와 데이터 가져오기를 위한 Apollo를 설치합니다.

yarn @mantine/core @mantine/hooks @appllo-graphql graphql

_app.tsx 파일 가져오기 공급자에서 @appllo/client 및 @mantine/core . 그런 다음 공급자로 전체 앱을 래핑합니다.

//_app.tsx
import { MantineProvider } from "@mantine/core";
import { ApolloProvider } from "@apollo/client";
import "../styles/globals.css";
import Client from "../services/Apollo";
import type { AppProps } from "next/app";

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ApolloProvider client={Client}>
      <MantineProvider>
        <Component {...pageProps} />
      </MantineProvider>
    </ApolloProvider>
  );
}

export default MyApp;

ApplloProvider는 클라이언트 소품을 받습니다. 공급자에게 Client.ts 파일에 대한 자격 증명이 필요합니다. 이 파일은 Storefront 대시보드에서 가져온 콘텐츠 API 끝점 및 API 키입니다.

환경 변수 설정

환경 변수로 .env 파일에 초기 상점 이름과 API 키를 배치했습니다. Shopify 대시보드에서 가져오는 데 필요한 API 키입니다. API 키를 얻으려면 Shopify 스토어에 비공개 앱을 추가해야 합니다.

Storefront API는 Shopify 스토어의 모든 기능을 제공합니다. Storefront API에 액세스하려면 API 키가 필요합니다. API 키를 얻으려면 비공개 앱을 만들어야 합니다. 먼저 대시보드로 이동하여 앱 섹션으로 이동하면 여기에서 비공개 앱 생성 옵션을 찾을 수 있습니다. 비공개 앱을 만들고 API 키를 받으세요.

제품을 가져오는 기능

이제 백엔드에서 제품을 가져오는 agetProducts() 기능을 설정할 수 있습니다.

이 단계에서는 상점에 제품이 있어야 합니다. 이제 Shopify API에서 제품을 쿼리할 수 있습니다. 단순성과 코드 가독성을 위해 함수 이름을 getProducts() 로 지정합니다. 우리는 우리 가게에서 처음 5개의 제품을 얻습니다.

데이터의 정적 렌더링을 위해 getStaticProps() 함수 내에서 API를 호출합니다. getStaticProps를 사용하여 해당 매장에서 제품을 가져옵니다.

import Client from "@services/Apollo";
import { gql } from "@apollo/client";

export default async function getProducts() {
  const { data, error, loading } = await Client.query({
    query: gql`
      query Products {
        products(first: 5) {
          edges {
            node {
              id
              handle
              title
              description
              variants(first: 10) {
                edges {
                  node {
                    id
                    image {
                      height
                      url
                      altText
                      width
                    }
                  }
                }
              }
            }
          }
        }
      }
    `,
  });
  return { data, error, loading };
}

UI에 제품 목록 표시

이제 제품 배열을 매핑합니다. 실제 데이터를 얻으려면 Storefront API에서 에지와 노드를 거쳐야 합니다.

{
  _.map(data.products.edges, (product: Product) => {
              const { id, title, description, variants } = product.node;
              const url = variants.edges[0].node.image.url;
              return (
                <Card key={id}>
                  <h3>{title}</h3>
                  <img alt={title} src={url} />
                  <p>{description}</p>
                  <Button>Add to cart</Button>
                </Card>
              );
            })}

추가 정보:
https://shopify.dev/api/storefront
https://nextjs.org