npmpackage.info

Gathering detailed insights and metrics for @graphiql/react

Other packages similar to @graphiql/react

@graphql-yoga/graphiql

4.3.5

This the GraphiQL used by GraphQL Yoga. This package is currently not published to npm and only contains the React component `GraphQLYoga`.

@graphiql/plugin-explorer

5.0.0

This package provides a plugin that integrates the [`GraphiQL Explorer`](https://github.com/OneGraph/graphiql-explorer) into the GraphiQL UI.

@graphiql/plugin-code-exporter

5.0.0

This package provides a plugin that integrates the [GraphiQL Code Exporter](https://github.com/OneGraph/graphiql-code-exporter) into the GraphiQL UI.

@graphiql/plugin-history

0.3.0

## API

Gathering detailed insights and metrics for @graphiql/react

@graphiql/react - 0.35.1 | npmpackage.info

@graphiql/react

GraphiQL & the GraphQL LSP Reference Ecosystem for building browser & IDE tools.

0.35.1

16,534

MIT

TypeScript

883.74 kB

33,461,048 4.6

Installations

npm install @graphiql/react

Developer Guide

BETA

Typescript

Yes

Module System

ESM, UMD

Node Version

20.19.2

NPM Version

10.8.2 Score

84.1

Supply Chain

87.5

Quality

98.3

Maintenance

100

Vulnerability

98.9

License

Pull Requests

Open

41

Total

2,633

Closed

486

Merged

2,106

Issues

Open

310

Total

1,221

Closed

911

Releases

1,046

@graphiql/react@0.35.1

Updated on Jun 24, 2025

codemirror-graphql@2.2.3

Updated on Jun 24, 2025

@graphiql/plugin-history@0.3.0

Updated on Jun 24, 2025

@graphiql/plugin-doc-explorer@0.3.0

Updated on Jun 24, 2025

@graphiql/plugin-explorer@5.0.0

Updated on Jun 24, 2025

monaco-graphql@1.7.1

Updated on Jun 24, 2025

View All 1,046 releases

Languages

TypeScript

JavaScript

CSS

HTML

Shell

Python

Astro

PHP

Vue

Reason

Scala

Svelte

TypeScript (91.06%)

JavaScript (4.08%)

CSS (3.94%)

HTML (0.55%)

Shell (0.16%)

Python (0.06%)

Astro (0.05%)

PHP (0.04%)

Vue (0.03%)

Reason (0.02%)

Scala (0.01%)

Svelte (0.01%)

Developer

graphql

Download Statistics

Total Downloads

33,461,048

Last Day

17,034

Last Week

415,178

Last Month

1,908,437

Last Year

17,439,616

GitHub Statistics

MIT License

16,534 Stars

4,065 Commits

1,771 Forks

238 Watchers

77 Branches

296 Contributors

Updated on Jul 01, 2025

Maintainers

View All 296 Contributors

Package Meta Information

Latest Version

0.35.1

Package Id

@graphiql/react@0.35.1

Unpacked Size

883.74 kB

Size

394.96 kB

File Count

194

NPM Version

10.8.2

Node Version

20.19.2

Published on

Jun 24, 2025

Total Downloads

Cumulative downloads

Total Downloads

33,461,048

Last Day

12.3%

17,034

Compared to previous day

Last Week

-16.1%

415,178

Compared to previous week

Last Month

-4.9%

1,908,437

Compared to previous month

Last Year

63.4%

17,439,616

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Changelog | API Docs | NPM

`@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 GraphiQL, 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.

1import { GraphiQLProvider } from '@graphiql/react';
2import { createGraphiQLFetcher } from '@graphiql/toolkit';
3
4const fetcher = createGraphiQLFetcher({
5  url: 'https://my.graphql.api/graphql',
6});
7
8function MyGraphQLIDE() {
9  return (
10    <GraphiQLProvider fetcher={fetcher}>
11      <div className="graphiql-container">Hello GraphQL</div>
12    </GraphiQLProvider>
13  );
14}

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

1import { QueryEditor } from '@graphiql/react';
2
3function MyGraphQLIDE() {
4  return (
5    <GraphiQLProvider fetcher={fetcher}>
6      <div className="graphiql-container">
7        <QueryEditor />
8      </div>
9    </GraphiQLProvider>
10  );
11}

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 font for regular text and the 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 - GraphiQL - in the graphiql package.

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

useStorage: Provides a storage API that can be used to persist state in the browser (by default using localStorage).
useTheme: Manages the current theme and provides a method to update it.
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
`editor`	Manages query, variables, headers, and response editors and tabs
`execution`	Handles the execution of GraphQL requests
`plugin`	Manages plugins and the currently active plugin
`schema`	Fetches, validates, and stores the GraphQL schema

Usage Example

1import { useGraphiQL, useGraphiQLActions, useTheme } from '@graphiql/react';
2
3// Get an action to fetch the schema
4const { introspect } = useGraphiQLActions();
5
6// Get the current theme and a method to change it
7const { theme, setTheme } = useTheme();
8
9// Or use a selector to access specific parts of the state
10const schema = useGraphiQL(state => state.schema);
11const currentTheme = useTheme(state => 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.

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.

Colors

Colors are defined using the HSL format. 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 yarn dev in the package folder in a separate terminal. This will build the package using Vite. When using it in combination with yarn dev:graphiql (running in the repo root) this will give you auto-reloading when working on graphiql and @graphiql/react simultaneously.

No vulnerabilities found.

10

Maintained

Determines if the project is "actively maintained".

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

License

Determines if the project has defined a license.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

4

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

4

Security-Policy

Determines if the project has published a security policy.

2

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 0

Details

Warn: third-party GitHubAction not pinned by hash: .github/workflows/main-test.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/graphql/graphiql/main-test.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main-test.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/graphql/graphiql/main-test.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main-test.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/graphql/graphiql/main-test.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main-test.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/graphql/graphiql/main-test.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main-test.yml:28: update your workflow using https://app.stepsecurity.io/secureworkflow/graphql/graphiql/main-test.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main-test.yml:40: update your workflow using https://app.stepsecurity.io/secureworkflow/graphql/graphiql/main-test.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main-test.yml:41: update your workflow using https://app.stepsecurity.io/secureworkflow/graphql/graphiql/main-test.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main-test.yml:44: update your workflow using https://app.stepsecurity.io/secureworkflow/graphql/graphiql/main-test.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/main-test.yml:50: update your workflow using https://app.stepsecurity.io/secureworkflow/graphql/graphiql/main-test.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr-graphql-compat-check.yml:34: update your workflow using https://app.stepsecurity.io/secureworkflow/graphql/graphiql/pr-graphql-compat-check.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr-graphql-compat-check.yml:36: update your workflow using https://app.stepsecurity.io/secureworkflow/graphql/graphiql/pr-graphql-compat-check.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr-graphql-compat-check.yml:40: update your workflow using https://app.stepsecurity.io/secureworkflow/graphql/graphiql/pr-graphql-compat-check.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr.yml:40: update your workflow using https://app.stepsecurity.io/secureworkflow/graphql/graphiql/pr.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr.yml:41: update your workflow using https://app.stepsecurity.io/secureworkflow/graphql/graphiql/pr.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr.yml:43: update your workflow using https://app.stepsecurity.io/secureworkflow/graphql/graphiql/pr.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr.yml:50: update your workflow using https://app.stepsecurity.io/secureworkflow/graphql/graphiql/pr.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr.yml:75: update your workflow using https://app.stepsecurity.io/secureworkflow/graphql/graphiql/pr.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr.yml:76: update your workflow using https://app.stepsecurity.io/secureworkflow/graphql/graphiql/pr.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr.yml:78: update your workflow using https://app.stepsecurity.io/secureworkflow/graphql/graphiql/pr.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr.yml:111: update your workflow using https://app.stepsecurity.io/secureworkflow/graphql/graphiql/pr.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr.yml:112: update your workflow using https://app.stepsecurity.io/secureworkflow/graphql/graphiql/pr.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr.yml:114: update your workflow using https://app.stepsecurity.io/secureworkflow/graphql/graphiql/pr.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr.yml:119: update your workflow using https://app.stepsecurity.io/secureworkflow/graphql/graphiql/pr.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr.yml:130: update your workflow using https://app.stepsecurity.io/secureworkflow/graphql/graphiql/pr.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr.yml:131: update your workflow using https://app.stepsecurity.io/secureworkflow/graphql/graphiql/pr.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr.yml:133: update your workflow using https://app.stepsecurity.io/secureworkflow/graphql/graphiql/pr.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr.yml:138: update your workflow using https://app.stepsecurity.io/secureworkflow/graphql/graphiql/pr.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr.yml:209: update your workflow using https://app.stepsecurity.io/secureworkflow/graphql/graphiql/pr.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr.yml:212: update your workflow using https://app.stepsecurity.io/secureworkflow/graphql/graphiql/pr.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr.yml:214: update your workflow using https://app.stepsecurity.io/secureworkflow/graphql/graphiql/pr.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr.yml:219: update your workflow using https://app.stepsecurity.io/secureworkflow/graphql/graphiql/pr.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/pr.yml:229: update your workflow using https://app.stepsecurity.io/secureworkflow/graphql/graphiql/pr.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/pr.yml:238: update your workflow using https://app.stepsecurity.io/secureworkflow/graphql/graphiql/pr.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/pr.yml:253: update your workflow using https://app.stepsecurity.io/secureworkflow/graphql/graphiql/pr.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr.yml:268: update your workflow using https://app.stepsecurity.io/secureworkflow/graphql/graphiql/pr.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr.yml:269: update your workflow using https://app.stepsecurity.io/secureworkflow/graphql/graphiql/pr.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr.yml:271: update your workflow using https://app.stepsecurity.io/secureworkflow/graphql/graphiql/pr.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/pr.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/graphql/graphiql/pr.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/graphql/graphiql/pr.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/graphql/graphiql/pr.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/graphql/graphiql/pr.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr.yml:28: update your workflow using https://app.stepsecurity.io/secureworkflow/graphql/graphiql/pr.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr.yml:60: update your workflow using https://app.stepsecurity.io/secureworkflow/graphql/graphiql/pr.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr.yml:61: update your workflow using https://app.stepsecurity.io/secureworkflow/graphql/graphiql/pr.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr.yml:63: update your workflow using https://app.stepsecurity.io/secureworkflow/graphql/graphiql/pr.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr.yml:90: update your workflow using https://app.stepsecurity.io/secureworkflow/graphql/graphiql/pr.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr.yml:91: update your workflow using https://app.stepsecurity.io/secureworkflow/graphql/graphiql/pr.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr.yml:93: update your workflow using https://app.stepsecurity.io/secureworkflow/graphql/graphiql/pr.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/pr.yml:99: update your workflow using https://app.stepsecurity.io/secureworkflow/graphql/graphiql/pr.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr.yml:149: update your workflow using https://app.stepsecurity.io/secureworkflow/graphql/graphiql/pr.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr.yml:150: update your workflow using https://app.stepsecurity.io/secureworkflow/graphql/graphiql/pr.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr.yml:152: update your workflow using https://app.stepsecurity.io/secureworkflow/graphql/graphiql/pr.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr.yml:157: update your workflow using https://app.stepsecurity.io/secureworkflow/graphql/graphiql/pr.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr.yml:168: update your workflow using https://app.stepsecurity.io/secureworkflow/graphql/graphiql/pr.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr.yml:170: update your workflow using https://app.stepsecurity.io/secureworkflow/graphql/graphiql/pr.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr.yml:175: update your workflow using https://app.stepsecurity.io/secureworkflow/graphql/graphiql/pr.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr.yml:179: update your workflow using https://app.stepsecurity.io/secureworkflow/graphql/graphiql/pr.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/pr.yml:185: update your workflow using https://app.stepsecurity.io/secureworkflow/graphql/graphiql/pr.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr.yml:189: update your workflow using https://app.stepsecurity.io/secureworkflow/graphql/graphiql/pr.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr.yml:195: update your workflow using https://app.stepsecurity.io/secureworkflow/graphql/graphiql/pr.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/graphql/graphiql/release.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/graphql/graphiql/release.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/graphql/graphiql/release.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:27: update your workflow using https://app.stepsecurity.io/secureworkflow/graphql/graphiql/release.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:36: update your workflow using https://app.stepsecurity.io/secureworkflow/graphql/graphiql/release.yml/main?enable=pin
Info: 0 out of 55 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 10 third-party GitHubAction dependencies pinned

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

4.6

/10

Last Scanned on 2025-06-23

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to @graphiql/react

Other packages similar to @graphiql/react

@graphiql/react

Installations

Developer Guide

Yes

ESM, UMD

20.19.2

10.8.2

Score

Pull Requests

41

2,633

486

2,106

Issues

310

1,221

911

Releases

Languages

Developer

graphql

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

33,461,048

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

@graphiql/react

Purpose

Getting started

Available Stores

Core Hooks

Usage Example

Theming

Colors

Development

10

10

10

10

4

4

2

0

0

0

0

0

4.6

/10

`@graphiql/react`