Apollo Graphql Studio で"Cannot read property 'launchAPI' of undefined と言うエラーが表示されます。このエラーを表示させないためには

Question

下記の質問についてご存知の方がいらっしゃいましたらご教示を願います。

---

【質問の主旨】

Apollo Graphql Studioで下記のGraphQLを実行しました。

query GetLaunches {
  launches {
    id
    mission {
      name
    }
  }
}

すると画面上に** "message": "Cannot read property 'launchAPI' of　undefined** と言うエラーが表示されます。このエラーを表示させず、クエリが要求するAPIデータをApollo Graphql Studioの画面上で表示させるためにはどうすれば良いでしょうか？」

【質問の補足】

1.

私はApollo Basicsのチュートリアルに沿って、Webアプリを作成しようとしています。そのチュートリアルのRun queries in the playgroundと言う箇所を見て、上記のクエリを作成しました。

2.

このクエリを実行するためのファイ群全体は、GitHubにUPしています。

3.

Apollo Graphql Studioで表示されたエラーメッセージを読むと、 "Cannot read property 'launchAPI' of undefined「launchAPIのプロパティが属性が読むことができません」"となっています。ですが個人的には、launch.jsでLaunchAPIクラスをチュートリアルに書かれているものと同じ内容を記述しているつもりです(GitHub)。にもかかわらず、エラーが表示されることには納得がいきません。

---

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

Answer 1

本回答に対する直接的な答えになっていないかもしれませんが、そもそもApollo Basicsのチュートリアルを試したければ、ODYSSEYという Apollo GraphQLのチュートリアルサイトを使った方が良いと思います。

ODYSSEYは見た感じ、2021年12月中旬ごろに新しくできたチュートリアルサイトのようです。その内容に基づくと、Apollo Graphql Studioがドキュメントに書かれているとおりに動作します。

ひょっとしたら日本語訳がついたチュートリアルは情報がすでに古くなっているかもしれません。

Answer 2

JavaScript(以下JS)の知識だけでGraphqlの知識やその派生サービスは門外漢ですが
解決の種になるかと思ってこちらに投げます。

Cannot read property 'launchAPI' of undefined

これはJSによくあるエラーです。
JSはオブジェクト指向プログラミング言語なので、
値.プロパティ名という指定をすれば、値が持っているプロパティの値にアクセスすることが出来ます。

しかし、JSは完全なオブジェクト指向言語ではありません。
一部プロパティを所持できず、参照を試みただけでエラーで落ちてしまう例外中の例外となる値が2個存在します。

• null
• undefined

例えば({name: "taro"}).ageというコードをJSで実行すると
nameプロパティしか所持していない値に対してageプロパティを参照します。
すると「そんなプロパティはない」という事でundefinedが得られます。

今回のケースはプロパティのチェインが1個でしたけど、
実際の業務だとval.name.toUpperCase()みたいに、
nameプロパティでString型の値がとれるから、決め打ちでtoUpperCaseメソッドを叩いて大文字にしようみたいな事はよくやります。

すると予想外な値が来すると途中でundefinedやnull値を踏んで、エラーで落ちる現象に繋がります。
今回のケースはまさにこのパターンを引いてしまっているので
JS上級者でなければ絶対に原因に辿り着く事が出来ない難度の高いエラーと言えるでしょう。

---

話をGraphqlに戻して、

launchAPIプロパティを参照しようとした親の値がundefinedになっているという話ですね。
しかしそんなプロパティは画面上にない。

画像にはスタックトレースというエラーが発生した番地の情報も記されており、
それを読むとnode_modules内というライブラリの中で発生していますね。

これは下記のような解釈が出来ます。

• Apollo Graphql Studioの依存モジュールのバージョンアップ等で完全に使えなくなっている

復旧依頼を投げるとかそっちのフォーラム等で解消してもらうべき

• 質問文で記載したquery GetLaunches {}から始まるクエリの書き方が誤っており、

向こうのモジュールでクエリをパースしてオブジェクトを生成することに失敗、大惨事が発生している

---

質問者さんの立場から出来る事は後者を疑うことだけです。

もしqueryの書き方をそこいらのブログ記事の情報を元にコピペしてたりしているならば、
サービス提供している人が出しているドキュメントやリファレンスを閲覧して、
その記述で本当に正しいのか？を検証してみてください。

こういうモジュールってバージョンアップで記述ルールが変わって
以前使えた機能や書き方が使えなくなってることも考えられますからね。

しかし実際パースに失敗したなら
「不正なクエリなのでパース出来ませんでした」と記載しろや！という話なので
推測が正しいと仮定した場合、モジュールの作りはあまり良くないとは思いますね。

Comments

[echizeyayota]

miyabi-sun さん。
詳しいコメントありがとうございます。
また今回のエラーに関してどこを疑うべきか、非常に参考になります。

> もしqueryの書き方をそこいらのブログ記事の情報を元にコピペしてたりしているならば、

queryはApolloが公開している、公式チュートリアルの記述をそのままコピペしているだけなので、おそらく間違いはないと思います。
https://apollographql-jp.com/tutorial/resolvers/#run-queries-in-the-playground

ですからエラーが出る可能性は、「Apollo Graphql Studioの依存モジュールのバージョンアップ等で完全に使えなくなっている」の方が高いかもしれません。

いずれにしても、以下の質問で述べた対応に沿って、Apollo-GraphQLのコミュニティでも質問を投稿してみます。
https://teratail.com/questions/373921

今後ともどうぞよろしくお願いします。

[echizeyayota]

ApolloGraphql のコミュニティで質問を投稿しました。
https://community.apollographql.com/t/error-message-cannot-read-property-launchapi-of-undefined-in-apollo-graphql-studio-how-to-fix-this-error/2257

[miyabi-sun]

ｂ
解決したら自己解決で良いので、顛末書いてクローズという感じにしましょう

[echizeyayota]

> 解決したら自己解決で良いので、顛末書いてクローズという感じにしましょう

了解です。