GraphQLで取り出したAPIデータをJavaScriptのconsole.logで表示させるときの記述方法を教えてください。

Question

【質問の主旨】

GraphQLで取り出したAPIデータをJavaScriptのconsole.logで出力させるときの記述方法を教えてください。

【質問の補足】

1. 出力させたいデータについて

出力させたいデータとは、具体的にShopifyストアの中で取り扱っているある商品の価格であるpriceのプロパティ値です。

上記のスクリーンショットの中においてピンク色で囲った部分です。なお、このmutationはアプリを構成しているファイルの1つであるProductUpdate.jsの中で定義しています。

2. 自分で考えたpriceを出力するための表現方法

index.jsの37行目と38行目で自分なりに、商品の価格を記述するためのpriceの表現を考えてみましたが、
いずれの場合も下記のエラーが出力されます。

console.log(data.variants.edges[0].node.price); // 37行目
console.log(products.variants.edges[0].node.price); // 38行目

Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'edges')

3. console.log(data)の内容について

下記のスクリーンショットはindex.jsの40行目で、console.log(data) を挿入したときの出力結果です。

---

以上、ご確認をよろしくお願いします

Answer 1

dataの出力結果を素直に見る限りdata.productUpdate.product.variants.edges[0].node.priceで良いと思いますがいかがでしょうか？

TypeError: Cannot read properties of undefined (reading 'edges')

上記エラーは「edgesのreadをしようとしたけど対象がundefinedだった」ということなので、data.variantsがundefinedになっています。dataの出力結果ではdata.variantsは存在しないので当然の動作に見えます。

追記

.then((data) =>で受け取るdataはdata:{data:{...},extensions:{...}なのでdata.data.productUpdate.....かもしれません。

Comments

[echizeyayota]

k4a さん。
コメントありがとうございます。

console.log(data.productUpdate.product.variants.edges[0].node.price)

を実行すると、下記のエラーが表示されます。

Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'product')

このエラーによると、product が定義されていないということなので、

console.log(data.productUpdate.variants.edges[0].node.price)

productの部分を削って実行しても

Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'variants')

同じようなエラーが出ます。このあとvariants, edges[0], node を削っても

Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading '...')

という感じで同じようなエラーが表示されます。

最後に

console.log(data.productUpdate);

を実行すると、undefined が返ってきます

[echizeyayota]

k4a さん。
たびたびのコメントありがとうございます。

console.log(data.data.productUpdate.product.variants.edges[0].node.price);

とすると、商品の価格を出力させることができました。
助かりました！今後ともどうぞよろしくお願いします。