Docusaurus v2 和 GraphQL Playground 集成

Posted 2023-03-04

【中文标题】Docusaurus v2 和 GraphQL Playground 集成

【英文标题】：Docusaurus v2 and GraphQL Playground integration

【发布时间】：2020-09-05 14:42:39

【问题描述】：

我想在我的一个页面中将 GraphQL Playground 呈现为 React component，但由于 webpack 中缺少 file-loader 而失败。有没有办法在 docs 中解决这个问题，还是我需要使用新的 webpack 配置创建新插件？

将 Playground 和 Docusaurus 完全集成是个好主意吗？

感谢您的想法...

【问题讨论】：

Docusaurus 似乎也弄乱了游乐场组件的 css...

@EthanSK 没错。事实证明，在 Docusaurus 中渲染 <Playground /> 需要花费太多精力，我选择在 <iframe> 中加载它并使用 postMessage 浏览器 API 进行通信。

【参考方案1】：

不确定您是否找到了更好的方法，但请查看：https://www.npmjs.com/package/graphql-playground-react

你可以将这个 react 组件直接嵌入到你的 react 应用中——看起来 Apollo 也使用了这个的 vanilla JS 版本

【参考方案2】：

一些 Docusaurus 网站嵌入了 Playground：

Hermes Uniforms

在您的情况下，您将不得不编写一个插件来使用 file-loader 扩展 webpack 配置。

【讨论】：

我专注于GraphQL Playground，它可以作为 React 的注释嵌入，而不是一般的游乐场。不过还是谢谢你。现在我知道自定义插件是一种方式。