Registry / web-framework / vite-plugin-graphiql

vite-plugin-graphiql

library1.1.0jsnpmunverified

A Vite plugin that integrates the GraphiQL IDE into your Vite development server at a dedicated endpoint (/__graphiql). Current stable version is 1.1.0 (Dec 2022), with monthly releases adding features like support for @graphiql/plugin-explorer. Requires Vite ^2.9.0 || ^3.0.0 and graphql as peer dependencies. Intended for development only. Key differentiator: easy setup of GraphiQL in Vite projects without manual configuration of webpack or other bundlers.

web-framework http-networking

npm install vite-plugin-graphiql

github ↗package ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-GRAPHI

vite-plugin-graphiql

web-frameworkjavascriptv1.1.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

graphiql (default)

✓ import graphiql from 'vite-plugin-graphiql'

✗ import { graphiql } from 'vite-plugin-graphiql'

Plugin is exported as default; named import does not work.

graphiql (require)

✓ const graphiql = require('vite-plugin-graphiql')

✗ const { graphiql } = require('vite-plugin-graphiql')

CommonJS require works but must use default import style.

GraphiQLOptions

✓ import type { GraphiQLOptions } from 'vite-plugin-graphiql'

TypeScript types are exported; use import type for compile-only usage.

Minimal setup: import the plugin and add it to Vite config with a GraphQL endpoint URL.

// vite.config.ts import { defineConfig } from 'vite'; import graphiql from 'vite-plugin-graphiql'; export default defineConfig({ plugins: [ graphiql({ // Replace with your GraphQL endpoint URL client: { url: process.env.GRAPHQL_ENDPOINT ?? 'http://localhost:4000/graphql', }, // Optional: enable GraphiQL Explorer plugin (requires @graphiql/plugin-explorer installed) // explorer: true, }), ], });

Debug

Known issues

gotchaPlugin only works in development mode; production build will not include GraphiQL.

fix

Do not use in production builds; conditionally add plugin with a Vite conditional plugin array.

affects: >=1.0.0

deprecatedv1.1.0 deprecates manual client dist resolution; use client.url instead.

fix

Set client.url in plugin options instead of configuring the client dist path.

affects: >=1.0.0

gotchaYou must install graphql as a direct dependency of your project; not installing it will cause errors at runtime.

fix

Run npm install graphql --save or equivalent.

affects: >=1.0.0

gotchaThe GraphiQL endpoint defaults to /__graphiql and is fixed; you cannot customize it.

fix

There is no workaround; if you need a custom path, fork the plugin.

affects: >=1.0.0

breakingv1.0.0 initial release; no previous breaking changes.

fix

N/A

affects: >=1.0.0

Errors

Common errors & fixes

Error: Cannot find module 'graphql'

graphql is not installed in your project.

fix

Run npm install graphql

TypeError: graphiql is not a function

You imported the plugin as a named export instead of default.

fix

Use import graphiql from 'vite-plugin-graphiql' instead of import { graphiql } from 'vite-plugin-graphiql'

Error: Could not resolve 'vite-plugin-graphiql/client'

The client path resolution failed; you might have set a wrong client.url.

fix

Remove any manual client configuration and use the default or set client.url correctly.

Upgrade

Version history

1.1.0latest on npm

Audit

Dependencies

viterequiredPeer dependency: requires Vite ^2.9.0 || ^3.0.0

graphqlrequiredRequired by GraphiQL itself; must be installed separately

Agent activity

17 hits · last 30 days

node

Amazon

Perplexity

OpenAI (training)

Resources

githubhttps://github.com/mammadataei/vite-plugin-graphiql ↗

packagehttps://www.npmjs.com/package/vite-plugin-graphiql ↗