蓋茨比（Gatsby）是一種流行的靜態(tài)站點(diǎn)生成器，通過(guò)簡(jiǎn)化數(shù)據(jù)採(cǎi)購(gòu)，構(gòu)建和部署來(lái)簡(jiǎn)化網(wǎng)站創(chuàng)建。該過(guò)程通常涉及：

1. 數(shù)據(jù)採(cǎi)集??：從不同來(lái)源（CMS，Markdown，數(shù)據(jù)庫(kù)等）收集數(shù)據(jù)。
2. 構(gòu)建過(guò)程（以GraphQL為動(dòng)力）：利用GraphQL來(lái)管理和處理網(wǎng)站生成的數(shù)據(jù)。
3. 部署：將靜態(tài)站點(diǎn)發(fā)佈到託管平臺(tái)（NetLify，Vercel等）。

本文側(cè)重於增強(qiáng)構(gòu)建過(guò)程，特別是通過(guò)用更豐富的特徵graphql Playground替換Gatsby的默認(rèn)GraphiQl GraphQl IDE。

GraphiQL與GraphQl遊樂(lè)場(chǎng)

雖然GraphIQL充當(dāng)Gatsby的默認(rèn)IDE，但GraphQl Playground提供了幾個(gè)優(yōu)點(diǎn)：

• 增強(qiáng)的模式文檔：提供交互式，多列模式文檔。
• 自動(dòng)更新：自動(dòng)重新加載模式。
• 訂閱支持：支持GraphQL訂閱。
• 改進(jìn)的用戶體驗(yàn)：包括查詢歷史記錄，HTTP標(biāo)頭配置，選項(xiàng)卡和主題可擴(kuò)展性等功能。

它們之間的選擇取決於您項(xiàng)目的需求。該教程由於其高級(jí)功能而使用GraphQL操場(chǎng)演示。

用Gatsby設(shè)置GraphQL操場(chǎng)

本指南將帶您設(shè)置一個(gè)新的Gatsby項(xiàng)目並集成GraphQL遊樂(lè)場(chǎng)。

1。安裝Gatsby CLI：

 NPM安裝-G Gatsby -CLI

2。創(chuàng)建一個(gè)新的蓋茨比項(xiàng)目：

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

3。啟動(dòng)開發(fā)服務(wù)器：

蓋茨比發(fā)展

訪問(wèn)http://localhost:8000/__graphql默認(rèn)GraphiQl IDE。當(dāng)存在GraphQl Playground桌面應(yīng)用程序時(shí)，該教程顯示了直接集成它的動(dòng)手方法。

4。配置環(huán)境變量：

環(huán)境變量允許在不同環(huán)境（開發(fā)，生產(chǎn)）之間進(jìn)行自定義。在項(xiàng)目root上創(chuàng)建.env.development開發(fā)文件：

 <code>GATSBY_GRAPHQL_IDE=playground</code>

5。在JavaScript中管理環(huán)境變量：

蓋茨比的環(huán)境變量在構(gòu)建時(shí)間和node.js運(yùn)行時(shí)可訪問(wèn)。要在運(yùn)行時(shí)動(dòng)態(tài)使用它們，請(qǐng)安裝env-cmd ：

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

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

 “開發(fā)”：“ env-cmd  - 文件.env.開發(fā) -  fallback gatsby deventer”

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

6。重新啟動(dòng)服務(wù)器：

重新啟動(dòng)開發(fā)服務(wù)器：

紗線開始//或NPM運(yùn)行開發(fā)

刷新http://localhost:8000/__graphql ?，F(xiàn)在，您應(yīng)該看到GraphQL操場(chǎng)！

結(jié)論

本教程演示瞭如何在一個(gè)蓋茨比項(xiàng)目中切換到GraphiQL到GraphQl Playground，並利用操場(chǎng)的增強(qiáng)功能來(lái)改善開發(fā)工作流程。切換的決定取決於您的特定要求。

進(jìn)一步的資源：

• Gatsby JS文檔
• GraphQL操場(chǎng)文檔
• ENV-CMD文檔

以上是將GraphQL操場(chǎng)與Gatsby一起使用的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！