소개

최근 화제의 Shopify로 앱을 개발하고 있습니다.
처음으로 GrapqhQL을 만져 Shopify 앱 개발과의 친화성의 높이, 확장성의 높이에 놀랐습니다.
GraphQL로 개발할 때 막힌 부분이 많아 해결책을 남겨 둡니다.

이 기사의 타겟

Shopify에서 앱을 개발하기 시작하려는 사람들

GraphQL은 어쩐지 알 수 있습니다

GraphQL+Next.js의 보일러 플레이트에서 프로젝트 만들기 및 이동

Shopify App CLI 을 사용하여 출력합시다.

shopify create node

대화식에 여러가지 듣기 때문에, 적절히 입력합니다.
완료하고 다음을 실행하면 설치하기위한 URL이 출력되어 스토어에 앱 설치를 할 수 있습니다.

shopify serve

설치 실행 후, 다음과 같은 화면이 되어 Next.js가 움직이고 있는 것을 알 수 있습니다.



소스 코드는 다음과 같아야 합니다.

GraphQL 클라이언트 설치

기본적으로 GraphQL을 실행하기위한 클라이언트가 없으므로 설치합니다.

yarn add @apollo/react-hooks

Component 만들기

ShowProducts

루트 디렉토리에 Components 디렉토리를 작성하고 ShowProducts.js를 작성하십시오.
그 전에 스토어의 관리 화면 왼쪽 메뉴의 상품 관리에서 테스트용으로 상품을 하나 작성해 둡시다.

소스 코드는 여기입니다.

import React from "react";
import { useQuery } from "@apollo/react-hooks";
import { gql } from "apollo-boost";
const GET_PRODUCTS = gql`
  query GET_PRODUCTS {
    products(first: 10) {
      edges {
        node {
          id
          title
        }
      }
    }
  }
`;
import ApolloClient from "apollo-boost";
const client = new ApolloClient({
  fetch: fetch,
  fetchOptions: {
    credentials: "include",
  },
});
const ShowProducts = () => {
  const { data, loading, refetch } = useQuery(GET_PRODUCTS, { client: client });
  if (loading || !data.products) {
    return <div>Loading...</div>;
  }
  const products = data.products.edges.map((productEdge) => (
    <div key={productEdge.node.id}>
      <p>id: {productEdge.node.id}</p>
      <p>title:{productEdge.node.title}</p>
    </div>
  ));
  return (
    <div>
      {products}
      <button
        onClick={() => {
          refetch();
        }}
      >
        refetch
      </button>
    </div>
  );
};
export default ShowProducts;

이 부분에서 Shopify에 던지는 GraphQL을 정의합니다.

const GET_PRODUCTS = gql`
  query GET_PRODUCTS {
    products(first: 10) {
      edges {
        node {
          id
          title
        }
      }
    }
  }
`;

↑로 정의한 GraphQL은 이하 useQueryhook로 실행되어 data에 결과가 들어갑니다.

const { data, loading, refetch } = useQuery(GET_PRODUCTS, { client: client });

이제 방금 만든 상품이 표시되고 있는지 생각합니다.

AddProduct

다음으로 GraphQL로 앱에서 제품을 만들어 보겠습니다.

Component 디렉토리에 AddProduct.js를 만듭니다.
소스 코드는 다음과 같습니다.

import React, { useState } from "react";
import { gql } from "apollo-boost";
import ApolloClient from "apollo-boost";
import { useMutation } from "@apollo/client";
const client = new ApolloClient({
  fetch: fetch,
  fetchOptions: {
    credentials: "include",
  },
});
const ADD_PRODUCT = gql`
  mutation ADD_PRODUCT($title: String!) {
    productCreate(input: { title: $title }) {
      product {
        id
      }
    }
  }
`;
const AddProduct = () => {
  const [addProduct] = useMutation(ADD_PRODUCT, { client });
  const [productTitle, setProductTitle] = useState("");
  return (
    <div>
      <label>
        Title
        <input
          type="text"
          value={productTitle}
          onChange={(event) => {
            setProductTitle(event.target.value);
          }}
        />
        <button
          onClick={() => {
            addProduct({
              variables: {
                title: productTitle,
              },
            });
          }}
        >
          Submit
        </button>
      </label>
    </div>
  );
};
export default AddProduct;

아래에 저장할 GraphQL을 정의합니다.

const ADD_PRODUCT = gql`
  mutation ADD_PRODUCT($title: String!) {
    productCreate(input: { title: $title }) {
      product {
        id
      }
    }
  }
`;

버튼을 클릭하여 상품을 추가할 수 있음을 확인할 수 있다고 생각합니다.

요약

이것으로 취득과 추가 일대로의 처리의 흐름을 확인할 수 있었다고 생각합니다.
GraphQL에서 TypeScript 유형을 생성할 수 있어 RestAPI보다 견고하게 작성하는 비용이 낮아지는 것이 좋다고 느꼈습니다.
여기에서 한 걸음 나아가 스스로 작성한 GraphQL 서버와 Shopify의 GraphQL의 결합도 가능하고, 실제로 만들어 보았는데 기능 확장이 꽤 용이하게 할 수 있었으므로 이것도 언젠가 기사로 하고 싶습니다.