vite-plugin-graphiql

1.1.0 verified Mon Apr 27 auth: no javascript

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.

Common errors

error Error: Cannot find module 'graphql' ↓

cause graphql is not installed in your project.

fix

Run npm install graphql

error TypeError: graphiql is not a function ↓

cause 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 Error: Could not resolve 'vite-plugin-graphiql/client' ↓

cause 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.

Warnings

gotcha Plugin 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.

deprecated v1.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.

gotcha You 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.

gotcha The 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.

breaking v1.0.0 initial release; no previous breaking changes. ↓

fix N/A

Install

npm install vite-plugin-graphiql

yarn add vite-plugin-graphiql

pnpm add vite-plugin-graphiql

Imports

graphiql (default)

wrong

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

correct

import graphiql from 'vite-plugin-graphiql'

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

graphiql (require)

wrong

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

correct

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.

Quickstart

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,
    }),
  ],
});