npm 包 graphiql-code-exporter 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发领域，GraphiQL 是一个流行的工具，用于浏览和操作 GraphQL API。GraphiQL 具有很多有用的功能，但是 Export Code 功能不是内置的，需要依靠插件才能使用。本文将介绍一个 npm 包 graphiql-code-exporter，它可以轻松地在 GraphiQL 中实现导出代码的功能，并提供详细的使用教程。

安装

安装 graphiql-code-exporter 很简单，只需要在终端中运行以下命令即可：

$ npm install graphiql-code-exporter

集成到 GraphiQL 中

要使用 graphiql-code-exporter，需要将其集成到 GraphiQL 中。这里有两种方式：

通过 CDN 引入

只需将以下代码片段添加到您的 HTML 文件中：

<script src="https://cdn.jsdelivr.net/npm/graphiql-code-exporter/dist/graphiqlCodeExporter.min.js"></script>

通过 import 引入

如果您的项目使用了 Webpack 等工具打包，可以通过 import 引入 graphiql-code-exporter：

import GraphiQL from 'graphiql';
import GraphiQLCodeExporter from 'graphiql-code-exporter';

const graphiql = new GraphiQL({...});

GraphiQLCodeExporter(graphiql);

使用示例

一旦 graphiql-code-exporter 成功集成到 GraphiQL 中，就可以使用其导出功能。在 GraphiQL 中编写查询后，单击左下角的 Export Code 按钮，选择您要导出的语言（如 JavaScript 或 Python），该查询的代码将会自动生成。

以下是一个示例，导出 JavaScript 代码：

生成的 JavaScript 代码如下：

fetch('https://api.example.com/graphql', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ query: 'query { todos { id, text, completed } }' }),
})
.then(response => response.json())
.then(data => console.log(data));

指导意义

使用 graphiql-code-exporter 可以极大地提高前端开发的效率，特别是涉及到多个后端 API 的场景。它允许开发人员快速创建 GraphQL 查询，并导出可以在其他项目中使用的可重复代码。

除此之外，graphiql-code-exporter 还有以下特点：

支持多种语言导出
自动添加正确的请求头和 JSON 内容
可以自定义请求 URL

因此，它是一个值得前端开发人员学习和使用的工具。

总结

graphiql-code-exporter 是一个方便的 npm 包，可以帮助开发人员在 GraphiQL 中轻松导出可重复的代码。本文介绍了 graphiql-code-exporter 的基本使用方法以及其重要性和指导意义。希望本文对您有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/5f2bbe5e3b0ab45f74a8bb55