将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中文网其他相关文章！