Shopify アプリ開発(GraphQL準備編)

概要

Shopify アプリことはじめ 3回目に当たる今回は、実際にアプリの開発作業に入っていきます。

前回記事より開発フローを再掲します。

• パートナーアカウントの作成
• 開発ストアの設定
• Shopify CLIのインストール
• CLIで開発ストアへのログイン
• CLIでShopify アプリの作成
• Shopify CLIのインストール
• ngrokでローカル開発環境を公開
• 開発
• 本番環境へのアップ
• 公開設定

開発の項目に関しては、ShopifyのUIライブラリであるPolarisによる管理画面の作り方と、Shopify GraphQLを利用したリソースの管理に分割してご紹介していきます。

本シリーズでは「指定タグのついた注文情報を発送済にする」アプリを作っていきます。Shopifyの一番最初のハンズオンは商品の価格を変更するアプリです。なのでせっかくですので別のリソースを使ったアプリをサンプルにします。

まずはGraphQLを利用したリソース管理から紹介したいのですが、今回はその準備としてリファレンスやツールの紹介とテストデータの準備を行います。

GraphQL Admin API

ShopifyはいくつかのAPIを有しておりますが、商品情報や注文情報を管理したい場合はAdmin APIを利用します。Admin APIはインターフェイスとしてGraphQLとRESTの二つが用意されています。

本シリーズではGraphQLを使ってアプリを作ります。なぜなら、そちらの方が楽しいからです。

RESTの方が好みだという方もいらっしゃると思います。そのような方でも追いやすいように、RESTではどこのリファレンスを参照すれば良いかをご紹介し、GraphQL同様に進めていけるようにします。

リファレンスとツール

リファレンス

リソース取得に使うquery、リソースの追加・更新・削除などに使うmutation、そしてそれぞれで扱われるobjectに関しての説明はこちらで確認できます。

https://shopify.dev/api/admin-graphql

RESTの場合はこちらを参照してください。GraphQLを使用している場合でも一部のfilterなどで使える値をこちらで確認するケースもありました。

https://shopify.dev/api/admin-rest

Shopify GraphQL Admin API explorer

queryやmutationのテストが行えます。

https://shopify.dev/apps/tools/graphiql-admin-api

Explorerタブをクリックすると、左側にGraphQLクエリの一覧が表示されます。使用したいGraphQLクエリ、レスポンスに欲しい値をなどをクリックしていくことで、GraphQLクエリを作成してくれます。

PreviewタブをクリックすることでGraphQLクエリの整形もしてくれます。完成したら再生ボタンを押すことで、サンプルのレスポンスを確認することが出来ます。何かミスがあればエラーも確認することが出来ます。

本アプリの簡単な仕様

要件

ストアスタッフが取得したいタグを複数入力すると、条件に合った注文の一覧が表示されます。「発送済にする」ボタンをクリックすると、対象の注文が逐次発送済ステータスになります。

必要なインターフェイス

上記の要件から以下の2点が必要だと考えられます。

1. タグでフィルタリングが可能な注文一覧取得query
2. 取得した注文情報を発送済にするmutation

注文検索時に1を実行し注文一覧を取得、ボタンクリックで2を実行し対象の注文を発送済ステータスに変更するという流れです。

下準備

GraphQL Admin APIを触る前に、下準備をしておきましょう。

テスト用のデータの作成

ShopifyではCLIを通して、複数のテストデータを作成することが出来ます。では注文を作成していきます。

shopify populate draftorders -n 10

shopify populateは指定したリソースを作成するコマンドです。正確には注文を直接作成することはできないので、注文の下書き(draftorder)を作ります。他にも商品(product)や顧客(customer)のデータを作ることが出来ます。

nオプションは作成するリソースの件数です。未指定の場合は5件作成されます。

作成した注文の下書きは、ストア管理画面の「注文管理」→「下書き」から確認できます。このままではテスト出来ないので、支払いを回収し注文に変換していきます。CLIから変更はできないので、ストア管理画面から対象の注文の下書きを選択し、GUIで変更していきます。

詳細画面の「支払いを回収」ボタンをクリックし、「支払い済みとしてマークする」を選択してください

確認用のモーダルが表示されますので、そのまま「注文を作成」ボタンをクリックすると、注文が作成されます。

スコープの調整

次に作成するアプリがストア内のリソースを操作できるように、スコープを指定します。スコープを指定することで、アプリインストール時にストアスタッフに指定スコープを承認するかの確認が表示されるようになります。

今回必要となるスコープは以下です。

• read_orders
• write_assigned_fulfillment_orders

ルートディレクトリ直下にある.envに必要なスコープを,繋ぎで記述してください。

...
SCOPES=read_orders,write_assigned_fulfillment_orders
...

既にアプリがインストールされていた場合でもスコープが更新されると、アプリ表示時に再度確認画面が表示されます。ストアの管理画面から作成中のアプリに移動し、承認を行なってください。

これで準備完了です。

必要なスコープの確認

作成するアプリにどのようなスコープが必要か確認したい場合は、リファレンスを参照します。必要スコープの記述は各mutationやobjectの仕様ページにあります。

例えば今回は、orderオブジェクトを取得するので、以下のページで確認します。

https://shopify.dev/api/admin-graphql/2022-04/objects/Order#top

RESTの場合は各リソースの使用ページにCautionの形で記述されています。

https://shopify.dev/api/admin-rest/2022-04/resources/order#top

まとめ

長くなってしまいましたので、今回は一旦ここまでとします。GraphQLを利用するのに必要なリファレンス・ツールの紹介をしました。また、開発時に使用するテストデータの作成と、アプリのスコープの設定を行いました。

次回はApollo Clientを用いてGraphQLでShopifyのリソースを管理する方法を紹介します。