Shopify GraphQLAPIで商品を取得する

5737 ワード
GraphQL shopify Postman Postman テキストリンク

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
以下のようになる。

{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の挙動を楽しんでいただければ、幸いです！！
ではまた！！