こんにちは、Offers を運営している株式会社 overflow CTO の 大谷旅人 です。
テックブログの順番が回ってきたのですが、最近はドメイン特化した内容をゴリゴリに開発しているため話題として書けそうなものがありません。困った。
私的には、FTX に塩漬けしていた仮想通貨が吸い込まれたり(アクセスすると 503)と話題に事欠かないのですが...
というわけで? 勢いで一部プロダクトに仕込んだ Apollo Sandbox の話をお送りします。
GraphQL Ruby
GraphQL Ruby は、GraphQL API を実装するためのライブラリで、Shopify など多くの企業で利用されています。また、Guide が整っており、これさえ読んでおけば OK。
弊社は只今歴史的な経緯により、全面的に API をこの GraphQL Ruby を利用した構成へと切り替えをしていっています。
Apollo Sandbox
Apollo が公開している GraphQL IDE ツールです。
suggest や Fragment 自動作成、Reference の見やすさなど他のツールとは正直一歩抜きん出ています。
↑URL で開くと、特段組み込むことなしに使えるものもあります。
弊社はこれまで、GraphiQL を利用していたのですが、上記のような使いやすさや機能の豊富さから置き換えを行いました。DarkMode もあって素敵。
GraphQL Rubyで利用する場合の設定
基本は、Embedding Sandbox として公開されている内容のままとなります。
CSRFトークン & Cookie考慮
Rails application であった場合は、Cookie 考慮したり、CSRF Token をリクエストに含みたくなりますよね。
その場合は、Options 設定にて可能です。
<!DOCTYPE html>
<html>
<head>
<title>GraphQL Dev Tool</title>
<%= csrf_meta_tags %>
</head>
<body>
<div style="width: 100%; height: 100%;" id='embedded-sandbox'></div>
<script src="https://embeddable-sandbox.cdn.apollographql.com/_latest/embeddable-sandbox.umd.production.min.js"></script>
<script>
new window.EmbeddedSandbox({
target: '#embedded-sandbox',
initialEndpoint: 'https://path/to/graphql_endpoint',
handleRequest: (endpointUrl, options) => {
return fetch(endpointUrl, {
...options,
headers: {
...options.headers,
'X-CSRF-Token': document.querySelector(`meta[name="csrf-token"]`).content
},
})
},
includeCookies: true,
});
</script>
</body>
</html>
Introspection Result
良い子なスキーマ設定であれば、Maximum Query Depth は設定されていますよね。
ただその場合、開発時に Introspection による型情報の取得が limit 到達してうまく行えません。
以下のように、Handler 部分に手を入れておきます。
graphql_params = {variables: variables, context: context, operation_name: operation_name}
graphql_params[:max_depth] = nil if !Rails.env.production? && query.include?('IntrospectionQuery')
result = MyHogeSchema.execute(query, **graphql_params)
Production 環境では、利用不可とするのも忘れずに。
# For security (see https://graphql-ruby.org/schema/introspection.html#disabling-introspection)
disable_introspection_entry_points if Rails.env.production?
おわりに
新たなツール入れると、何も成してないのに何か成した気になる不思議。
気分というのは大事なものです。
スキーマベースに議論する機会が増え、かつ Component 単位で誰の何データが欲しいのか明示されるようになってきたことで、内部構造が鮮明になっていっている今日此頃。引き続き、大小の改善を繰り返していきます。
関連記事
副業転職の Offers 開発チームがお送りするテックブログです。【エンジニア積極採用中】カジュアル面談、副業からのトライアル etc 承っております💪 jobs.overflow.co.jp
Discussion