postmanでshopifyのAPIを叩いてみる

# はじめに
こんにちは。
最近shopifyを触る機会があったので、自分の頭を整理することもかねてAPIの叩き方を備忘録がてら残しておこうと思います。
shopifyはいくつかのAPIを提供していますが、その中でも今回は基本となる **admin API** と **storefront API** の叩き方についてまとめていきます。
今回はpostmanを使ってAPIを叩いてみます。

## 前提
- shopify partnersにアカウントを作成済みであること
- ストアが作成済みであること
- ストアにshopifyアプリをインストール済みであること。

試すだけならプライベートがお手軽です。

## 目次
- admin APIを叩く
- storefront APIを叩く
- 注意点
- 最後に

# 叩いてみる

![スクリーンショット 2021-02-06 23.49.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/382072/be5b0d7f-5204-efa4-dd28-18ff847d910e.png)


## admin APIを叩く
admin APIは GraphQLとRESTの形式でAPIを提供しています。それぞれのAPIを叩くためにはストアにインストールしてあるアプリで発行した **APIキー** や **パスワード** が必要になるので確認できるよう、事前にストアにログインしておきましょう。

上記キーはストアにログインし **アプリ管理>インストール済みのアプリ** を選択した先で確認できます。
![スクリーンショット 2021-02-04 11.04.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/382072/cc7e4dad-0e19-f804-3bce-ca9cd9587acf.png)


### GraphQLの場合
設定はこんな感じです。

- URLは${store_domain}を自分のストアのドメインに置き換える
- Headerを二つ追加
    - Content-Type : application/json
    - X-Shopify-Access-Token : AdminAPIのパスワード
- BodyでGraphQLを選択し、希望のクエリをコピペ(必要に応じて変数も)

![スクリーンショット 2021-02-06 20.11.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/382072/edf6bd11-13e6-26ef-bce7-91b68d3e853d.png)

![スクリーンショット 2021-02-06 20.15.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/382072/5f688dea-8390-10d3-b98a-672fa3cdc56a.png)

#### 結果例

```json
{
    "data": {
        "shop": {
            "name": "${store_domain}",
            "primaryDomain": {
                "url": "https://${store_domain}",
                "host": "${store_domain}"
            }
        }
    },
    "extensions": {
        "cost": {
            "requestedQueryCost": 2,
            "actualQueryCost": 2,
            "throttleStatus": {
                "maximumAvailable": 1000.0,
                "currentlyAvailable": 998,
                "restoreRate": 50.0
            }
        }
    }
}
```


### RESTの場合
設定はこんな感じです。

- URLは${store_domain}を自分のストアのドメインに置き換える+使いたいAPIのURLを指定する
- AuthorizationはBasic Authを選択し以下の情報を入力する
    - Username : AdminAPIのAPIキー
    - Password : AdminAPIのパスワード

![スクリーンショット 2021-02-04 11.18.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/382072/912f2df3-6149-4d8a-aa3a-2f65bfcd7616.png)


#### 結果例

```json
{
    "orders": [
        {
            "id": 0000000,
            "email": "${customer_email}",
            "closed_at": null,
            "created_at": "2021-02-04T04:23:09-05:00",
            "updated_at": "2021-02-04T04:23:10-05:00",
            "number": 3,
            "note": "",
            (長いので省略)
        }
    ]
}
```

## storefront APIを叩く
storefront APIはGraqhQLの形式のみでAPIを提供しています。
またストアの管理画面から確認できるアクセストークンをリクエストと一緒に渡すことでAPIを利用することができます。
![スクリーンショット 2021-02-05 12.56.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/382072/b150627c-5868-2f62-4d13-17378b6b8c58.png)


### GraphQLを叩く
設定こんな感じです。

- URLは${store_domain}を自分のストアのドメインに置き換える。admin APIに比べてdomainの後ろが一つPATHが少ないです。
- Headerを二つ追加
    - Content-Type : application/json
    - X-Shopify-Storefront-Access-Token : storefrontのアクセストークン

![スクリーンショット 2021-02-06 20.57.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/382072/ad803c42-788f-b012-f18f-f0e4b43cc930.png)

![スクリーンショット 2021-02-06 23.32.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/382072/f41c572b-c322-c7bd-9b33-0800712eef55.png)

#### 結果例

```json
{
    "data": {
        "shop": {
            "name": "${store_domain}",
            "primaryDomain": {
                "url": "https://${store_domain}",
                "host": "${store_domain}"
            }
        }
    }
}
```



## 注意点
### Admin APIを叩く際の注意点
- APIキーとパスワードはストアにインストールしているアプリから取得してください。(shopify partnersの方でも作れますがそっちじゃないです)
- 間違ったリクエストを送ってpostmanにキャッシュが残っているとリクエストに失敗することがあります。

### めも
最初に載せたスクショに **URLの例** とありますが、こちらをそのままブラウザで叩くだけでもレスポンスを取得できます。
`https://{apikey}:{password}@{hostname}/admin/api/{version}/{resource}.json`


## 最後に
今進行しているプロジェクトがshopifyを使ったものになっているので、今後もまたこんな記事を書くと思います。

それではまた。

![スクリーンショット 2021-02-07 19.45.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/382072/3d4ec1fb-d5e8-37f0-ee43-e9753e131ca9.png)

## references
[shopify公式ドキュメント](https://shopify.dev/docs)