JavaScript：GraphiQL（IDE 工具）

概述

GraphiQL 是一个交互式的浏览器内 GraphQL IDE。它允许开发者直接在浏览器中编写、验证和测试 GraphQL 查询，并浏览目标 GraphQL Schema 的文档。该项目由 GraphQL 社区维护，支持在 React 应用中集成，也可以作为独立工具使用。

主要特性

• 交互式查询编辑：支持语法高亮、自动补全和实时错误提示。
• Schema 文档浏览：自动加载并展示 GraphQL Schema 的类型、字段和参数说明。
• 历史记录：保存和复用之前的查询。
• 可嵌入式：作为 React 组件或通过 npm 包集成到自定义工具中。

安装

通过 npm 安装 GraphiQL：

npm install graphiql

该包依赖于 graphql 和 react / react-dom，请确保您的项目中已安装这些依赖。

快速开始

以下是一个最简集成示例，在 React 应用中渲染 GraphiQL 组件：

import React from 'react';
import { createRoot } from 'react-dom/client';
import GraphiQL from 'graphiql';
import { createGraphiQLFetcher } from '@graphiql/toolkit';
import 'graphiql/graphiql.min.css';

const fetcher = createGraphiQLFetcher({ url: 'https://your-graphql-endpoint.com/graphql' });

const App = () => <GraphiQL fetcher={fetcher} />;

createRoot(document.getElementById('root')).render(<App />);

将 url 替换为您的 GraphQL 服务地址，即可在页面中启动 GraphiQL IDE。

项目信息

• GitHub: graphql/graphiql
• npm: graphiql
• 描述: An interactive in-browser GraphQL IDE.