vite-plugin-graphql

0.1.0 verified Mon Apr 27 auth: no javascript deprecated

A Vite plugin (v0.1.0) that allows importing .gql and .graphql files as strings, similar to graphql-tag/loader for webpack. It is a lightweight wrapper using the Vite plugin API, requiring Vite 1.x beta or stable. Minimal configuration needed — just add it to plugins. No built-in type support or caching options; designed for small to medium projects. Release cadence: sporadic, last updated in 2021.

Common errors

error Error: The plugin 'vite-plugin-graphql' is incompatible with this version of Vite. ↓

cause Trying to use with Vite 2+ where plugin API changed (should be function instead of object).

fix

Upgrade to a Vite 2+ compatible GraphQL plugin or downgrade Vite to 1.x.

error Failed to resolve import 'vite-plugin-graphql' from 'vite.config.js' ↓

cause Package not installed or typo in import name.

fix

Run 'npm install vite-plugin-graphql' and ensure the import matches the package name exactly.

Warnings

deprecated Package is unmaintained since 2021 and relies on Vite 1.x plugin API, which is incompatible with Vite 2+. ↓

fix Migrate to a maintained alternative like @rollup/plugin-graphql or graphql-vite-plugin.

breaking Requires Vite ^1.0.0; will not work with Vite 2.x or later due to API changes. ↓

fix Do not use with Vite 2+; find a compatible plugin or upgrade approach.

gotcha The plugin does not parse .graphql files; it only returns the raw file content as a string. No GraphQL tags or AST processing. ↓

fix If you need parsed documents, use graphql-tag together with this plugin, or switch to a more feature-rich loader.

Install

npm install vite-plugin-graphql

yarn add vite-plugin-graphql

pnpm add vite-plugin-graphql

Imports

graphqlPlugin
wrong
```
const graphqlPlugin = require('vite-plugin-graphql')
```
correct
```
import graphqlPlugin from 'vite-plugin-graphql'
```
ESM default import is preferred, but CommonJS require works if using Node < 13 or CJS config.

graphqlPlugin

wrong

import { graphqlPlugin } from 'vite-plugin-graphql'

correct

const graphqlPlugin = require('vite-plugin-graphql')

Named import is not supported; the plugin must be imported as default.

VitePluginGraphQL
wrong
```
import VitePluginGraphQL from 'vite-plugin-graphql/default'
```
correct
```
import VitePluginGraphQL from 'vite-plugin-graphql'
```
No named export; default export only. TypeScript users may need to declare module types.

Quickstart

Shows how to add the plugin to Vite config and use it to import .graphql or .gql files as strings.

// vite.config.js (or vite.config.ts)
import { defineConfig } from 'vite';
import graphqlPlugin from 'vite-plugin-graphql';

export default defineConfig({
  plugins: [graphqlPlugin()],
});

// Then in any .js/.ts file:
import query from './schema.graphql';
console.log(query); // 'query { ... }' string
// Or .gql files:
import mutation from './mutation.gql';