Integrate GraphiQL IDE in your Vite projects

Please note that this plugin is only intended to be used in development mode.

First, install the plugin:

npm install --save-dev vite-plugin-graphiql

yarn add --dev vite-plugin-graphiql

pnpm add --save-dev vite-plugin-graphiql

GraphiQL requires graphql to be installed in your project; so install that too if you haven't already.

Then, import and add the plugin to your vite.config.ts and pass in the required configuration options:

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

export default defineConfig({
  plugins: [
    graphiql({
      client: {
        url: 'https://mygraphqlapi.com/graphql',
      },
    }),
  ],
})

Now start your dev server and navigate to http://localhost:5173/__graphiql to see the GraphiQL IDE.

You can find the full configuration options here.

Inspired by @unocss/inspector

Licensed under the MIT License.