# @graphiql/react

> [Changelog](https://github.com/graphql/graphiql/blob/main/packages/graphiql-react/CHANGELOG.md) | [API Docs](https://graphiql-test.netlify.app/typedoc/modules/graphiql_react.html) | [NPM](https://www.npmjs.com/package/@graphiql/react)

Latest version **0.39.1** (published 2026-09-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install @graphiql/react
pnpm add @graphiql/react
yarn add @graphiql/react
bun add @graphiql/react
```

## 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; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.39.1 |
| Published | 2026-09-30 |
| First published | 2022-05-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 17 |
| Unpacked size | 857.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 16914 |
| Maintainers | benjie, mjmahone, leebyron, i1g |
| Keywords | react, graphql, sdk, monaco-editor, monaco-graphql, monaco |

## Links

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

## Dependencies (17)

- [clsx](https://npm.io/package/clsx.md) ^1.2.1
- [zustand](https://npm.io/package/zustand.md) ^5
- [prettier](https://npm.io/package/prettier.md) ^3.5.3
- [get-value](https://npm.io/package/get-value.md) ^4.1.0
- [set-value](https://npm.io/package/set-value.md) ^4.1.0
- [markdown-it](https://npm.io/package/markdown-it.md) ^15.0.1
- [jsonc-parser](https://npm.io/package/jsonc-parser.md) ^3.3.1
- [framer-motion](https://npm.io/package/framer-motion.md) ^13.2
- [monaco-editor](https://npm.io/package/monaco-editor.md) 0.52.2
- [monaco-graphql](https://npm.io/package/monaco-graphql.md) ^1.9.0
- [@graphiql/toolkit](https://npm.io/package/@graphiql/toolkit.md) ^0.12.1
- [@radix-ui/react-dialog](https://npm.io/package/@radix-ui/react-dialog.md) ^1.1
- [react-compiler-runtime](https://npm.io/package/react-compiler-runtime.md) 19.1.0-rc.3
- [@radix-ui/react-tooltip](https://npm.io/package/@radix-ui/react-tooltip.md) ^1.2
- [graphql-language-service](https://npm.io/package/graphql-language-service.md) ^5.7.0
- [@radix-ui/react-dropdown-menu](https://npm.io/package/@radix-ui/react-dropdown-menu.md) ^2.1
- [@radix-ui/react-visually-hidden](https://npm.io/package/@radix-ui/react-visually-hidden.md) ^1.2

## 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

- 0.39.1 (latest) — 2026-09-30
- 1.0.0-rc.2 (rc) — 2026-10-12
- 1.0.0-beta.4 (beta) — 2026-09-28
- 0.37.6-alpha.2 (alpha) — 2026-05-19
- 0.37.3-canary-67317292.0 (canary) — 2025-11-30
- 1.0.0-next.2 (next) — 2022-08-05
- 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
- 0.39.0 — 2026-08-30
- 1.0.0-beta.1 — 2026-08-29
- 1.0.0-beta.0 — 2026-08-29
- 0.38.0 — 2026-08-25
- 0.37.7 — 2026-06-11
- … 475 more at https://npm.io/package/@graphiql/react/versions

## README

[Changelog](https://github.com/graphql/graphiql/blob/main/packages/graphiql-react/CHANGELOG.md)
|
[API Docs](https://graphiql-test.netlify.app/typedoc/modules/graphiql_react.html)
| [NPM](https://www.npmjs.com/package/@graphiql/react)

# `@graphiql/react`

A React SDK for building integrated GraphQL developer experiences for the web.

## Purpose

This package contains a set of building blocks that allow its users to build
GraphQL IDEs with ease. It's the set of components that make up Graph*i*QL, the
first and official GraphQL IDE, owned and maintained by the GraphQL Foundation.

There are two kinds of building blocks that this package provides: Stateful
context providers for state management and simple UI components.

## Getting started

All the state for your GraphQL IDE lives in multiple contexts. The easiest way
to get started is by using the `GraphiQLProvider` component that renders all the
individual providers.

There is one required prop called `fetcher`. This is a function that performs
GraphQL request against a given endpoint. You can easily create a fetcher using
the method `createGraphiQLFetcher` from the `@graphiql/toolkit` package.

```jsx
import { GraphiQLProvider } from '@graphiql/react';
import { createGraphiQLFetcher } from '@graphiql/toolkit';

const fetcher = createGraphiQLFetcher({
  url: 'https://my.graphql.api/graphql',
});

function MyGraphQLIDE() {
  return (
    <GraphiQLProvider fetcher={fetcher}>
      <div className="graphiql-container">Hello GraphQL</div>
    </GraphiQLProvider>
  );
}
```

Inside the provider you can now use any UI component provided by
`@graphiql/react`. For example, you can render an operation editor like this:

```jsx
import { QueryEditor } from '@graphiql/react';

function MyGraphQLIDE() {
  return (
    <GraphiQLProvider fetcher={fetcher}>
      <div className="graphiql-container">
        <QueryEditor />
      </div>
    </GraphiQLProvider>
  );
}
```

The package also ships the necessary CSS that all its UI components need. You
can import them from `@graphiql/react/style.css`.

> **Note**: In order for these styles to apply, the UI components need to be
> rendered inside an element that has a class name `graphiql-container`.

By default, the UI components will try to use the
[Roboto](https://fonts.google.com/specimen/Roboto) font for regular text and the
[Fira Code](https://fonts.google.com/specimen/Fira+Code) font for mono-space
text. If you want to use the default fonts you can load them using these files:

- `@graphiql/react/font/roboto.css`
- `@graphiql/react/font/fira-code.css`.

You can, of course, use any other method to load these fonts (for example, loading
them from Google Fonts).

Further details on how to use `@graphiql/react` can be found in the reference
implementation of a GraphQL IDE - Graph*i*QL - in the
[`graphiql` package](https://github.com/graphql/graphiql/blob/main/packages/graphiql/src/components/GraphiQL.tsx).

## Available Stores

GraphiQL uses a set of state management stores, each responsible for a specific part of the IDE's
behavior. These stores contain all logic related to state management and can be accessed via custom
React hooks.

### Core Hooks

- **`useMonaco`**: Access `monaco-editor` exports and the `monaco-graphql` instance. Designed for safe use in SSR environments.
- **`useGraphiQL`**: Access the current state.
- **`useGraphiQLActions`**: Trigger actions that mutate the state. This hook **never** rerenders.

The `useGraphiQLActions` hook **exposes all actions** across store slices.
The `useGraphiQL` hook **provides access to the following store slices**:

| Store Slice                              | Responsibilities                                                                                          |
| ---------------------------------------- | --------------------------------------------------------------------------------------------------------- |
| [`storage`](./src/stores/storage.ts)     | Provides a storage API that can be used to persist state in the browser (by default using `localStorage`) |
| [`editor`](./src/stores/editor.ts)       | Manages **query**, **variables**, **headers**, and **response** editors and tabs                          |
| [`execution`](./src/stores/execution.ts) | Handles the execution of GraphQL requests                                                                 |
| [`plugin`](./src/stores/plugin.ts)       | Manages plugins and the currently active plugin                                                           |
| [`schema`](./src/stores/schema.ts)       | Fetches, validates, and stores the GraphQL schema                                                         |
| [`theme`](./src/stores/theme.ts)         | Manages the current theme and provides a method to update it                                              |

### Usage Example

```js
import { useGraphiQL, useGraphiQLActions } from '@graphiql/react';

// Get an action to fetch the schema and an action to change theme
const { introspect, setTheme } = useGraphiQLActions();

// Use a selector to access specific parts of the state like current schema and theme
const { schema, theme } = useGraphiQL(state => ({
  schema: state.schema,
  theme: state.theme,
}));
```

All store properties are documented using TSDoc comments. If you're using an
IDE like VSCode for development, these descriptions will show up in auto-complete
tooltips. All these descriptions can also be found in the
[API Docs](https://graphiql-test.netlify.app/typedoc/modules/graphiql_react.html).

## Theming

All the components from `@graphiql/react` have been designed with customization
in mind. We achieve this using CSS variables.

All variables that are available for customization can be found in the
[`root.css` file](https://github.com/graphql/graphiql/blob/main/packages/graphiql-react/src/style/root.css).

### Colors

Colors are defined using the
[HSL format](https://en.wikipedia.org/wiki/HSL_and_HSV). All CSS variables for
colors are defined as a list of the three values that make up HSL (hue,
saturation and lightness).

This approach allows `@graphiql/react` to use transparent colors by passing the
value of the CSS variable in the `hsla` function. This enables us to provide
truly reusable UI elements where good contrasts are preserved regardless of the
elements background.

## Development

If you want to develop with `@graphiql/react` locally - in particular when
working on the `graphiql` package - all you need to do is run `pnpm dev` in the
package folder in a separate terminal. This will build the package using Vite.
When using it in combination with `pnpm dev:graphiql` (running in the repo
root) this will give you auto-reloading when working on `graphiql` and
`@graphiql/react` simultaneously.

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