Shopify GraphQLAPIで商品を取得する

# shopify GraphQLAPIで店舗の名前を取得する
## 前提
Postmanのインストール
shopifyで店舗開設済み
プライベートアプリ開設済み

## Postmanでプロジェクト作成
左上の+Newアイコンから新しくプロジェクトを作成
以下設定
1.HTTPメソッドをPOST設定
2.URLをhttps://{shopName}.myshopify.com./api/2020-10/graphqlに設定。（apiのバージョンはその時々に合わせてください）
3.Headersに2つパラメータ追加
　　X-Shopify-Storefront-Access-Token: 値にプライベートアプリのAPIキーのパスワード(shppaから始まる)
   Accept: 値にapplication/json
4.BodyをGraphqlに設定

以上で設定はOK
以下のようになる。
![スクリーンショット 2021-01-22 18.36.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1022774/a3c9d114-a528-89be-32a8-266d45fd72f8.png)
{shopName}とAPIKEY関しては各自で入力してください。

## BodyにQueryを記述
```
query Products($num: Int!, $cursor: String) {
        products(first:$num, after:$cursor) {
          pageInfo {
              hasNextPage
              hasPreviousPage
          }
          edges {
            cursor
            node {
              createdAt
              updatedAt
              handle
              id
              options {
                  id
                  name
                  values
              }
              productType
              title
              vendor
            }
          }
        }
      }
```

GRAPHQL VARIABLESに以下を記述。

```
{
    "num": 1
}
```

一旦POSTを押してリクエストを投げてみましょう。
以下のようなレスポンスが返ってきたら成功です。

```
{
    "data": {
        "products": {
            "pageInfo": {
                "hasNextPage": true,
                "hasPreviousPage": false
            },
            "edges": [
                {
                    "cursor": "eyJsYXN0X2lkIjo2NTU2MDI2MDQ0NTgxLCJsYXN0X3ZhbHVlIjoiNjU1NjAyNjA0NDU4MSJ9",
                    "node": {
                        "createdAt": "2021-03-05T15:57:14Z",
                        "updatedAt": "2021-03-07T12:35:46Z",
                        "handle": "sample",
                        "id": "gid://shopify/Product/xxxxxxxx",
                        "options": [
                            {
                                "id": "gid://shopify/ProductOption/8429411106981",
                                "name": "カラー",
                                "values": [
                                    "黒",
                                ]
                            },
                            {
                                "id": "gid://shopify/ProductOption/8429411139749",
                                "name": "Size",
                                "values": [
                                    "ミディアム",
                                    "ロング"
                                ]
                            }
                        ],
                        "productType": "スカート",
                        "title": "sampleA",
                        "vendor": "sample"
                    }
                }
            ]
        }
    },
    "extensions": {
        "cost": {
            "requestedQueryCost": 4,
            "actualQueryCost": 4,
            "throttleStatus": {
                "maximumAvailable": 1000.0,
                "currentlyAvailable": 996,
                "restoreRate": 50.0
            }
        }
    }
}
```

## GraphQLAPIの利点

余談ですが、GraphqlAPIの利点はRESTAPIと違い、**リクエストボディを見るだけで、返ってくるレスポンスを予想できる**という点です。
次はリクエストボディを見てみましょう。

## リクエストボティをみる。
リクエストボディの内側からみていきましょう。
具体的にはproducts.edges[0].nodeの中です。
リクエストボディには以下のように書かれています。

```
node {
    createdAt
    updatedAt
    handle
    id
    options {
        id
        name
        values
    }
    productType
    title
    vendor
}
```

一部説明します。

+ created_at： 商品が作成された時間
+ updated_at: 商品が更新された時間
+ id: 商品のid
+ options: 商品のオプション

などなど、、
実際にレスポンスを見ると、それっぽい値が返ってきているのがわかりますね！

つまり何が言いたいかというと、、
GraphQLAPIでは、レスポンスに返ってきて欲しいField(プロパティ)をリクエストに入れることで、欲しいデータを持ってくるというルールを覚えて欲しいってことです！

Field一覧はShopifyの公式に書いてあります。
https://shopify.dev/docs/admin-api/graphql/reference/products-and-collections/product#fields-2020-10

全てのFieldは網羅していませんが、こちらのサイトはみやすくおすすめです。
https://2fd.github.io/graphdoc/shopify/queryroot.doc.html

次はnodeと同階層以上のFieldの説明です。
### cursor
cursorはカーソルと読む？のかな。。
queryのafter:$cursorの部分にcursorの値を入れることで、cursor以下の商品を取得することができます。

### pageInfo
pageInfoはページネーションの際に使用すると便利で、booleanを返します。
hasNextPageは、取得した商品の後にページが存在するかどうか(商品が存在するかどうか)を示し、
hasPreviousPageは、取得した商品の前にページが存在するかどうか(商品が存在するかどうか)を示しています。
例では、cursorに値を入れず、クエリしているため、一番最初の商品から取得しています。
そのため、hasNextPageはtrueでhasPreviousPageはfalseが返ってきます。

ShopifyGraphQLAPIを通して、GraphQLの挙動を楽しんでいただければ、幸いです！！
ではまた！！