將GraphQL操場與Gatsby一起使用

蓋茨比（Gatsby）是一種流行的靜態站點生成器，通過簡化數據採購，構建和部署來簡化網站創建。該過程通常涉及：

1. 數據採集​​：從不同來源（CMS，Markdown，數據庫等）收集數據。
2. 構建過程（以GraphQL為動力）：利用GraphQL來管理和處理網站生成的數據。
3. 部署：將靜態站點發佈到託管平台（NetLify，Vercel等）。

本文側重於增強構建過程，特別是通過用更豐富的特徵graphql Playground替換Gatsby的默認GraphiQl GraphQl IDE。

GraphiQL與GraphQl遊樂場

雖然GraphIQL充當Gatsby的默認IDE，但GraphQl Playground提供了幾個優點：

• 增強的模式文檔：提供交互式，多列模式文檔。
• 自動更新：自動重新加載模式。
• 訂閱支持：支持GraphQL訂閱。
• 改進的用戶體驗：包括查詢歷史記錄，HTTP標頭配置，選項卡和主題可擴展性等功能。

它們之間的選擇取決於您項目的需求。該教程由於其高級功能而使用GraphQL操場演示。

用Gatsby設置GraphQL操場

本指南將帶您設置一個新的Gatsby項目並集成GraphQL遊樂場。

1。安裝Gatsby CLI：

 NPM安裝-G Gatsby -CLI

2。創建一個新的蓋茨比項目：

蓋茨比新的蓋茨比遊戲
CD Gatsby-playground

3。啟動開發服務器：

蓋茨比發展

訪問http://localhost:8000/__graphql默認GraphiQl IDE。當存在GraphQl Playground桌面應用程序時，該教程顯示了直接集成它的動手方法。

4。配置環境變量：

環境變量允許在不同環境（開發，生產）之間進行自定義。在項目root上創建.env.development開發文件：

 <code>GATSBY_GRAPHQL_IDE=playground</code>

5。在JavaScript中管理環境變量：

蓋茨比的環境變量在構建時間和node.js運行時可訪問。要在運行時動態使用它們，請安裝env-cmd ：

 YARN添加env-cmd -dev //或NPM安裝-SAVE-DEV ENV-CMD

修改package.json中的"develop"腳本：

 “開發”：“ env-cmd  - 文件.env.開發 -  fallback gatsby deventer”

這指示env-cmd將變量從.env.development或後備加載到.env ，如果存在。

6。重新啟動服務器：

重新啟動開發服務器：

紗線開始//或NPM運行開發

刷新http://localhost:8000/__graphql 。現在，您應該看到GraphQL操場！

結論

本教程演示瞭如何在一個蓋茨比項目中切換到GraphiQL到GraphQl Playground，並利用操場的增強功能來改善開發工作流程。切換的決定取決於您的特定要求。

進一步的資源：

• Gatsby JS文檔
• GraphQL操場文檔
• ENV-CMD文檔

以上是將GraphQL操場與Gatsby一起使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！