Docusaurus v2 and GraphQL Playground integration

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

整合游乐场和纪录片龙是个好主意吗？

感谢您的想法...

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

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

我从使用 graphql-react-playground 切换到 GraphiQL： package： "graphiql"： "^1.8.7">
这将我的错误转移到一个奇怪的错误上，网络上任何地方都没有引用(对我来说很少见(："没有有效的获取器实现可用">
我通过将 createGraphiQLFetcher 从"@graphiql/create-fetcher"导入到我的组件来修复上述问题
然后错误是找不到窗口组件，这是一个简单的错误，我在这里遵循了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>
);
}

现在，这工作并成功构建

一些Docusaurus网站有嵌入式游乐场：

爱马仕
制服

在您的情况下，您必须编写一个插件来扩展 webpack 配置，file-loader.

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

你可以直接在你的反应应用程序中嵌入这个反应组件 - 看起来阿波罗也使用这个的原版JS版本。

按照@Tom，我试图在我的文档龙文档中使用graphiql添加 graphql 游乐场

import React from "react";
import { createGraphiQLFetcher } from "@graphiql/toolkit";
import { GraphiQL } from "graphiql";
import "graphiql/graphiql.css";
const fetcher = createGraphiQLFetcher({
url: "https://my.graphql.api/graphql",
});
export default function GraphqlPlayGround() {
return <GraphiQL fetcher={fetcher} />;
}

我遇到了这个问题

Module not found: Error: Can't resolve 'react/jsx-runtime' in '/Users/user/Desktop/Saleor/DocAuth0/node_modules/@graphiql/react/dist'
Did you mean 'jsx-runtime.js'?
BREAKING CHANGE: The request 'react/jsx-runtime' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

我相信你们中的一些人会遇到同样的问题，要解决此问题，您需要为您的 webpack 配置创建一个自定义加载程序以禁用此行为

从 webpack 5.0.0-beta.30 开始，在 .mjs 文件或任何带有 package.json 的 package.json 中使用 "type"： "module" 的 .js 文件中使用导入时，您需要指定扩展名。如果项目中看到任何相关错误，您仍然可以禁用将 resolve.fullSpecified 设置为 false 的行为。

此过程需要遵循的步骤如下：

创建插件文件夹

：在项目根目录下创建一个插件文件夹。
：在插件文件夹中创建一个插件(例如，my-loaders(，其中包含index.js和 package.json 文件：

如文档龙

文档中所述configureWebpack()，下面突出显示的返回对象被合并到最终的webpack配置中。

/plugins/my-loaders/index.js

module.exports = function (context, options) {
return {
name: 'my-loaders',
configureWebpack(config, isServer) {
return {
module: {
rules: [
{
test: /.m?js/,
resolve: {
fullySpecified: false
}
},
],
},
};
},
};
};

/plugins/my-loaders/package.json

{
"name": "my-loaders",
"version": "0.0.0",
"private": true
}

3.更新文档龙配置：更新您的文档龙配置文件以使用该插件：/docusaurus.config.js

plugins: [
// ...
'my-loaders'
// ...
]

4.更新项目依赖项列表以使用插件：在项目根目录的 package.json 中将插件指定为依赖项：/package.json

{
// ...
"dependencies": {
// ...
"my-loaders": "file:plugins/my-loaders",
// ...
},
// ...
}

5.为项目安装新的插件依赖项：执行以下操作以在项目中使用新插件：

npm i

参考：请跟进[本文档]了解更多详情(https://dwf.dev/blog/2022/11/12/2022/updating-docusaurus-webpack-config(

相关内容

最新更新

热门标签：