# @graphiql/plugin-query-builder

> A first-party visual query builder plugin for GraphiQL.

Latest version **1.0.1** (published 2026-11-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install @graphiql/plugin-query-builder
pnpm add @graphiql/plugin-query-builder
yarn add @graphiql/plugin-query-builder
bun add @graphiql/plugin-query-builder
```

## Health

**Score 80/100 (A)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; high quality score; popular repo.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2026-11-02 |
| First published | 2026-08-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 437 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 16929 |
| Maintainers | benjie, mjmahone, leebyron, i1g |
| Keywords | react, graphql, graphiql, plugin, query, builder |

## Links

- npm: https://www.npmjs.com/package/@graphiql/plugin-query-builder
- Repository: https://github.com/graphql/graphiql
- Homepage: https://github.com/graphql/graphiql/tree/master/packages/graphiql-plugin-query-builder#readme
- Issues: https://github.com/graphql/graphiql/issues?q=issue+label:@graphiql/plugin-query-builder
- npm.io page: https://npm.io/package/@graphiql/plugin-query-builder

## Dependencies (1)

- [react-compiler-runtime](https://npm.io/package/react-compiler-runtime.md) ^1.0.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.1 (latest) — 2026-11-02
- 1.0.0-rc.3 (rc) — 2026-10-13
- 1.0.0-beta.4 (beta) — 2026-09-28
- 1.0.0 — 2026-11-01
- 1.0.0-rc.2 — 2026-10-12
- 1.0.0-rc.1 — 2026-09-30
- 1.0.0-rc.0 — 2026-09-28
- 1.0.0-beta.3 — 2026-09-28
- 1.0.0-beta.2 — 2026-09-26
- 1.0.0-beta.1 — 2026-08-29
- 1.0.0-beta.0 — 2026-08-29
- 0.0.0 — 2026-08-29

## README

# `@graphiql/plugin-query-builder`

A first-party visual query builder plugin for GraphiQL. Build GraphQL queries by clicking through your schema instead of writing them by hand.

Pick fields from the schema and the operation in the editor stays in sync, both ways. It covers a schema tree with checkboxes, argument inputs (scalars, enums, lists, and input objects, including lists of input objects), promoting scalar arguments to variables, creating named fragments from a selection, and union/interface type-condition selectors. See [#734](https://github.com/graphql/graphiql/issues/734) for the original feature request.

## Install

```bash
npm install @graphiql/plugin-query-builder
# or
yarn add @graphiql/plugin-query-builder
```

## Usage

```tsx
import { GraphiQL } from 'graphiql';
import { QUERY_BUILDER_PLUGIN } from '@graphiql/plugin-query-builder';
import '@graphiql/plugin-query-builder/style.css';

function App() {
  return <GraphiQL plugins={[QUERY_BUILDER_PLUGIN]} fetcher={fetcher} />;
}
```

## Known limitations

- **Aliases.** The tree addresses fields by their schema name, so a hand-written document that aliases the same field twice (`a: hero b: hero`) matches the first occurrence. Editing acts on that one; full alias-aware editing is not supported yet.
- **Explicit `null`.** The builder has no control for an explicit `null` argument, and treats an empty input as "remove this argument". A hand-written `arg: null` is therefore not preserved across an edit.

## License

MIT

---
_Source: https://npm.io/package/@graphiql/plugin-query-builder · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._