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