{"id":22679,"library":"vite-plugin-graphiql","title":"vite-plugin-graphiql","description":"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.","status":"active","version":"1.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/mammadataei/vite-plugin-graphiql","tags":["javascript","vite","vite-plugin","graphiql","graphql","typescript"],"install":[{"cmd":"npm install vite-plugin-graphiql","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-graphiql","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-graphiql","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency: requires Vite ^2.9.0 || ^3.0.0","package":"vite","optional":false},{"reason":"Required by GraphiQL itself; must be installed separately","package":"graphql","optional":false}],"imports":[{"note":"Plugin is exported as default; named import does not work.","wrong":"import { graphiql } from 'vite-plugin-graphiql'","symbol":"graphiql (default)","correct":"import graphiql from 'vite-plugin-graphiql'"},{"note":"CommonJS require works but must use default import style.","wrong":"const { graphiql } = require('vite-plugin-graphiql')","symbol":"graphiql (require)","correct":"const graphiql = require('vite-plugin-graphiql')"},{"note":"TypeScript types are exported; use import type for compile-only usage.","wrong":"","symbol":"GraphiQLOptions","correct":"import type { GraphiQLOptions } from 'vite-plugin-graphiql'"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite';\nimport graphiql from 'vite-plugin-graphiql';\n\nexport default defineConfig({\n  plugins: [\n    graphiql({\n      // Replace with your GraphQL endpoint URL\n      client: {\n        url: process.env.GRAPHQL_ENDPOINT ?? 'http://localhost:4000/graphql',\n      },\n      // Optional: enable GraphiQL Explorer plugin (requires @graphiql/plugin-explorer installed)\n      // explorer: true,\n    }),\n  ],\n});","lang":"typescript","description":"Minimal setup: import the plugin and add it to Vite config with a GraphQL endpoint URL."},"warnings":[{"fix":"Do not use in production builds; conditionally add plugin with a Vite conditional plugin array.","message":"Plugin only works in development mode; production build will not include GraphiQL.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Set client.url in plugin options instead of configuring the client dist path.","message":"v1.1.0 deprecates manual client dist resolution; use client.url instead.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Run npm install graphql --save or equivalent.","message":"You must install graphql as a direct dependency of your project; not installing it will cause errors at runtime.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"There is no workaround; if you need a custom path, fork the plugin.","message":"The GraphiQL endpoint defaults to /__graphiql and is fixed; you cannot customize it.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"N/A","message":"v1.0.0 initial release; no previous breaking changes.","severity":"breaking","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Run npm install graphql","cause":"graphql is not installed in your project.","error":"Error: Cannot find module 'graphql'"},{"fix":"Use import graphiql from 'vite-plugin-graphiql' instead of import { graphiql } from 'vite-plugin-graphiql'","cause":"You imported the plugin as a named export instead of default.","error":"TypeError: graphiql is not a function"},{"fix":"Remove any manual client configuration and use the default or set client.url correctly.","cause":"The client path resolution failed; you might have set a wrong client.url.","error":"Error: Could not resolve 'vite-plugin-graphiql/client'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}