そもそも、GraphiQL側の問題のようなのですが、Shopify GraphiQL Appにエラーとなるようなクエリを書き込んでしまうと、エラーで画面が表示されなくなります。
それだけならまだしも、「前回のクエリをlocalStorageに保持して初期値に使う」という仕様上、リロードしてもエラーで画面が表示されません。
それなら、localStorageの値を削除すれば良いじゃ無いかと思うところですが、値を削除してもリロードした瞬間にlocalStorageに前回値が書き込まれてしまうので、エラーで画面が表示されないのです。
つまり、
❶ クエリがエラーとなり画面が表示されない
❷ エラーとなるクエリがlocalStorageに保持されて初期値に設定される
❸ localStorageを削除してもリロードした瞬間に復元される
というコンボで、一度エラーとなるクエリを書き込んだら詰みです。
※ ここでのエラーというのは、エラーが返ってくるという意味ではなく、クエリを処理しようとするとJavaScriptでエラーになるケースなどです。僕の場合は誤って全角文字を含んだクエリを保持されてしまい詰みました。
で、エラーとなるクエリがlocalStorageに保持されてしまった際の復帰方法なのですが、
❶ ディペロッパーツールからlocalStorageの値を削除する
❷ タスクマネージャーからShopifyのタスクをキルする
❸ ページをリロードする
で、復帰できることがわかりました。
この方法にたどり着くまで1ヶ月ぐらいかかり、その間、Shopify GraphiQL App無しでShopifyの開発をしていたのですが、効率が激落でした。
再びShopify GraphiQL Appが使えるようになり、万々歳です。
