Zenn
🛍️

Shopifyでコレクションを追加するスクリプト

2021/12/16に公開
Shopify
tech

この記事はShopifyアドベントカレンダーの15日目の記事です。

背景

2000個ぐらいあるコレクションを追加してほしいとの依頼をもらったので.
コレクション以外にも製品の追加にも応用が聞くはずです。

実装

nodeで作っていきます。バージョンはv16.13.0です

> node --version
v16.13.0

1. プロジェクトの作成

> mkdir create-collections
> cd create-collections
> yarn init -y

package.jsonに以下を追加

package.json
"type": "module"

必要なパッケージをインストールします

> yarn add graphql graphql-request dotenv

2. Shopifyの管理画面から認証用URLを取得する

オンラインストア管理ページの「アプリ管理」から「プライベートアプリを管理する」をクリックします。

「プライベートアプリを作成する」をクリックして、プライベートアプリを作成に進みます。
ADMIN API権限を適宜必要そうなものを選んで(後で変更可能です)、「保存する」をクリックして作成します。
作成完了すると、以下のような画面が表示されます。

プライベートアプリは、URL形式「https://{apikey}:{password}@{hostname}/admin/api/{version}/{resource}.json」を使用した基本的なHTTP認証用いて、Shopifyで認証されます

と書いてあるように必要なものはURLの例だけです。URLの例をコピーします。
今回はGraphQLに対してリクエストするので、{resource}の部分をgraphqlに変更します。

- https://{apikey}:{password}@{hostname}/admin/api/{version}/{resource}.json
+ https://{apikey}:{password}@{hostname}/admin/api/{version}/graphql.json

変更したURLは.envファイルに保存します

.env
ENDPOINT=https://****/graphql.json

3. スクリプトを書く

GraphQLのExampleリクエストは公式ドキュメントにあるのでこれを使ってリクエストします。

src/index.js
import { GraphQLClient, gql } from 'graphql-request'
import dotenv from "dotenv";

dotenv.config();

const query = gql`
    mutation CollectionCreate($input: CollectionInput!) {
      collectionCreate(input: $input) {
        userErrors { field, message }
        collection {
          id
          title
          descriptionHtml
          handle
          sortOrder
          ruleSet {
            appliedDisjunctively
            rules {
              column
              relation
              condition
            }
          }
        }
      }
    }
`;
const variables = {
    "input": {
        "title": "Our entire shoe collection",
        "descriptionHtml": "View <b>every</b> shoe available in our store.",
        "ruleSet": {
            "appliedDisjunctively": false,
            "rules": {
                "column": "TITLE",
                "relation": "CONTAINS",
                "condition": "shoe"
            }
        }
    }
};

const client = new GraphQLClient(process.env.ENDPOINT, {})
try {
    const res = await client.request(query, variables);
    console.log('success')
    console.log(res)
} catch (err) {
    console.error(err)
}

4. 実行する

実行します。successがでるとコレクションが作られています。

> node src/index.js
success
{
  collectionCreate: {
    userErrors: [],
    collection: {
      id: 'gid://shopify/Collection/281804701874',
      title: 'Our entire shoe collection',
      descriptionHtml: 'View <b>every</b> shoe available in our store.',
      handle: 'our-entire-shoe-collection-1',
      sortOrder: 'BEST_SELLING',
      ruleSet: [Object]
    }
  }
}

その他

製品の追加はドキュメントあたりを見ればいけそう

Discussion