Docusaurus v2 和 GraphQL Playground 集成

Question

我想在我的一个页面中将GraphQL Playground渲染为React 组件，但由于webpack 中缺失而失败。有没有办法在文档中解决这个问题，或者我是否需要使用新的 webpack 配置创建新插件？file-loader

将 Playground 和 Docusaurus 集成到底是个好主意吗？

谢谢你的想法...

Answer 1

我刚刚遇到了完全相同的问题。基本上，带有 gQL Playground 集成的 Docusaurus 在本地运行良好，但由于在运行上述纱线构建时出现错误而无法编译。

最后我发现答案是在 Docusaurus 中，而不是构建自定义编译器：

1. 我从使用 graphql-react-playground 切换到 GraphiQL： package: "graphiql": "^1.8.7"
2. 这将我的错误转移到了一个奇怪的错误，在网络上的任何地方都没有引用（对我来说很少见）：“没有可用的有效获取器实现”
3. 我通过将 createGraphiQLFetcher 从“@graphiql/create-fetcher”导入到我的组件来修复上述问题
4. 然后错误是无法找到窗口组件，这是一个简单的错误，我在这里遵循了 docusaurus 文档： https: //docusaurus.io/docs/docusaurus-core#browseronly并将我的组件包装在这个页面上，就像这：

import BrowserOnly from '@docusaurus/BrowserOnly';
const Explorer = () => {
  const { siteConfig } = useDocusaurusContext();
  return (
      <Layout
        title={siteConfig.title}
        description="Slerp GraphQL Explorer">
        <main>
          <BrowserOnly fallback={<div>Loading...</div>}>
            {() => {
                const GraphEx = GraphExplorer
                return <GraphEx />
            }}
          </BrowserOnly>
        </main>
      </Layout>
  );
}

现在可以成功运行并构建了