ホームShopifyGatsbyでのShopifyパッケージ・プラグインの設定
2020年10月30日

GatsbyでのShopifyパッケージ・プラグインの設定

shopify

こんにちは、筋肉めがねです。

GatsbyでE-commerceサイトを作成するシリーズの記事、第二弾です。

本日は、GatsbyでShopify用のパッケージ設定、およびプラグイン設定を行います。

shopify-buyパッケージのインストール

先ずは、「shopify-buy」パッケージをインストールします。

Terminal
npm install shopify-buy

インストールしたパッケージは、後にjsxファイル内でimportし、使用します。

gatsby-source-shopifyプラグインのインストール

続いて、「gatsby-source-shopify」プラグインをインストールします。

gatsbytutorial
npm install gatsby-source-shopify

そして、「gatsby-config.js」ファイルで設定を行います。

「gatsby-config.js」ファイルの最後に設定しましょう。

gatsbytutorial/gatsby-config.js
...
plugins: [
  ...
  },
    {
      resolve: "gatsby-source-shopify",
      options: {
        // Shopifyのページで設定しているshopNameを書きます。
        // 例えばshopのドメインが'gatsby-source-shopify-test-shop.myshopify.com'であれば、
        // shopNameは'gatsby-source-shopify-test-shop'となります。
        shopName: "gatsbytutorial",
  
        // ShopifyのStorefront APIセクションで表示されているStorefront access tokenを貼り付けます。
        accessToken: "example012345678",
  
        // 使用するWebhook APIのバージョンを書きます。
        apiVersion: "2020-10",
  
        // デフォルトのtrueで問題ありません。
        verbose: true,
  
        // デフォルトの250で問題ありません。Shopifyへの1回のリクエストで幾つのレコードを取得するか、という設定です。
        paginationSize: 250,
  
        // デフォルトの"shop", "content"で問題ありません。
        includeCollections: ["shop", "content"],
  
        // 公式ページのqueryを以下の通りに変更してください。
        query: `
          {
            allShopifyProduct(sort: { fields: [title] }) {
              edges {
                node {
                  title
                  images {
                    originalSrc
                  }
                  shopifyId
                  id
                  description
                  availableForSale
                  priceRange {
                    maxVariantPrice {
                      amount
                    }
                    minVariantPrice {
                      amount
                    }
                  }
                }
              }
            }
          }
        `
      },
    },
  ],
}

access tokenは、shopifyのAppsページに記載されている「Storefront access token」です。

また、apiVersionについては、shopifyのAppsページに記載されている「Webhook API version」を書いてください。

webhook api version

そして、開発環境を立ち上げます。

gatsbytutorial
gatsby develop

開発環境を立ち上げたら、以下のパスにアクセスしてみましょう。

http://localhost:8000/___graphql

GraphQLでshopifyに関連するnodeが追加されている事が確認できると思います。

graphql

まとめ

本日は、GatsbyでShopify用のパッケージを設定する方法、およびプラグイン設定方法について書きました。

次回は、実際にShopifyで商品を設定し、ShopifyからGatsbyへデータを引っ張ってくるコードを書いていきます。

シェアする