GatsbyでGraphQLプレイグラウンドを使用します

人気のあるReact StaticサイトジェネレーターであるGatsbyは、データの調達、構築、展開を合理化することにより、Webサイトの作成を簡素化します。通常、プロセスには以下が含まれます。

1. データ収集：多様なソース（CMS、マークダウン、データベースなど）からデータを収集します。
2. ビルドプロセス（GraphQL-Powered）： GraphQLを使用して、Webサイト生成のデータを管理および処理します。
3. 展開：静的サイトをホスティングプラットフォームに公開する（netlify、vercelなど）。

この記事では、特にGatsbyのデフォルトのGraphiQl GraphQl IDEをより機能が豊富なGraphQLプレイグラウンドに置き換えることにより、ビルドプロセスの強化に焦点を当てています。

Graphiql vs. GraphQl Playground

GraphiQLはGatsbyのデフォルトIDEとして機能しますが、GraphQL Playgroundにはいくつかの利点があります。

• 拡張スキーマドキュメント：インタラクティブなマルチカラムスキーマドキュメントを提供します。
• 自動更新：スキーマを自動的にリロードします。
• サブスクリプションサポート： GraphQLサブスクリプションをサポートします。
• ユーザーエクスペリエンスの改善：クエリ履歴、HTTPヘッダー構成、タブ、テーマの拡張性などの機能が含まれます。

それらの選択は、プロジェクトのニーズに依存します。このチュートリアルは、高度な機能のためにGraphQLプレイグラウンドを使用したことを示しています。

GatsbyでGraphQLプレイグラウンドをセットアップします

このガイドでは、新しいGatsbyプロジェクトのセットアップとGraphQL Playgroundの統合をお勧めします。

1.ギャツビーCLIをインストール：

 npmインストール-g gatsby -cli

2。新しいギャツビープロジェクトを作成します：

ギャツビーニューギャツビープレイグラウンド
CD Gatsby-Playground

3。開発サーバーを起動します。

ギャツビーが発展します

http://localhost:8000/__graphqlでデフォルトのGraphiQl IDEにアクセスします。 GraphQL Playgroundデスクトップアプリが存在しますが、このチュートリアルは、直接統合するための実践的なアプローチを示しています。

4。環境変数を構成します：

環境変数により、さまざまな環境（開発、生産）にわたるカスタマイズが可能になります。プロジェクトルートで.env.developmentファイルを作成します。

 <code>GATSBY_GRAPHQL_IDE=playground</code>

5。JavaScriptの環境変数を管理する：

ギャツビーの環境変数は、ビルド時間とnode.jsランタイム中にアクセスできます。実行時に動的に使用するには、 env-cmdをインストールします。

 yarn add env-cmd ---dev //またはnpmインストール -  save-dev env-cmd

package.jsonで"develop"スクリプトを変更する：

 「開発」： "env-cmd  -  file .env.development-fallback gatsby develop"

これにより、 env-cmd .env.developmentまたはFallbackから.envに変数をロードするように指示します。

6。サーバーを再起動します：

開発サーバーを再起動します。

 YARN START //またはNPM Run Develop

ブラウザでhttp://localhost:8000/__graphql更新します。 GraphQLの遊び場を見る必要があります！

結論

このチュートリアルでは、GatsbyプロジェクトでGraphiQLからGraphQL Playgroundに切り替える方法を示しています。切り替える決定は、特定の要件に依存します。

さらなるリソース：

• Gatsby JSドキュメント
• GraphQLプレイグラウンドドキュメント
• env-cmdドキュメント

以上がGatsbyでGraphQLプレイグラウンドを使用しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。