Registry / devops / vite-plugin-simple-gql

vite-plugin-simple-gql

JSON →
library0.5.0jsnpmunverified

A Vite plugin that enables importing .graphql and .gql files as JavaScript modules. Version 0.5.0, actively maintained with monthly releases. Key differentiator: it simply uses graphql-tag under the hood to compile queries to AST, making it lightweight and easy to use compared to heavier solutions like @graphql-tools/webpack-loader for webpack or the built-in Vite support for GraphQL files (which is experimental). No configuration needed beyond adding the plugin to vite.config.js.

devops
npm install vite-plugin-simple-gql
github ↗package ↗homepage ↗
INSTALL
IMPORT
SIG · VITE-PLUGIN-SIMPLE
V
vite-plugin-simple-gql
devopsjavascriptv0.5.0
harness data pending
Install & Compatibility
Where this runs

No compatibility data collected yet for this library.

Code
Verified usage

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

default export (plugin)
✓ import gql from 'vite-plugin-simple-gql'
✗ import { gql } from 'vite-plugin-simple-gql'
The plugin is exported as default, not named. Common mistake is using named import.
Imported .graphql file
✓ import MyQuery from './queries/MyQuery.graphql'
✗ const MyQuery = require('./queries/MyQuery.graphql')
This is a Vite plugin, so it works only in ESM context. CommonJS require will not work.
TypeScript type for imported query
✓ import MyQuery from './queries/MyQuery.graphql'; type MyQueryType = typeof MyQuery;
The plugin does not ship TypeScript declarations for imported .graphql files. You may need to add a declaration file (e.g., *.d.ts) for TypeScript to recognize the module.

Shows how to set up the plugin in vite.config.js and use it to import a .graphql file.

// vite.config.js import { defineConfig } from 'vite'; import gql from 'vite-plugin-simple-gql'; export default defineConfig({ plugins: [gql()] }); // src/App.js import MyQuery from './queries/MyQuery.graphql'; import { print } from 'graphql'; console.log(print(MyQuery)); // prints the query string
Debug
Known issues
gotchaThe plugin does not transform .graphql files outside Vite's module graph (e.g., files imported using dynamic import or fs.readFile).
fix
Ensure all .graphql imports are static imports at the top level of your modules.
affects: >=0.1.0
breakingVersion 0.4.0 changed the default export from a function to a factory. Previously you had to call `gql()` with options; now it's always called with options (even if empty).
fix
Update vite.config.js to always call `gql()` as a function.
affects: <0.4.0
Errors
Common errors & fixes
Cannot find module 'graphql-tag'
Missing peer dependency graphql-tag
fix
Install graphql-tag: npm install graphql-tag
Uncaught SyntaxError: The requested module './queries/MyQuery.graphql' does not provide an export named 'default'
The .graphql file is not being processed by the plugin because it's not in the Vite project root or the plugin is not configured correctly.
fix
Check that vite-plugin-simple-gql is added to the plugins array in vite.config.js and that the .graphql file is inside the project root.
Upgrade
Version history
0.5.0latest on npm
Audit
Dependencies
graphql-tagrequiredPeer dependency; required to compile GraphQL strings to AST documents
Agent activity
6 hits · last 30 days
node
6
Resources
githubhttps://github.com/alansikora/vite-plugin-gql ↗
packagevite-plugin-simple-gql ↗
homepagehttps://github.com/alansikora/vite-plugin-gql#readme ↗
vite-plugin-simple-gql — npm install vite-plugin-simple-gql · libregistry