vite-plugin-graphql-loader
v4.0.4
Published
A Vite plugin for loading GraphQL files.
Downloads
121,444
Readme
vite-plugin-graphql-loader
A Vite plugin for loading GraphQL .gql and .graphql files, based on graphql-tag/loader
This package doesn't generate TypeScript definitions from the queries and fragments - see vite-plugin-graphql-codegen if you require this.
Install
yarn add -D vite-plugin-graphql-loader
or
npm i vite-plugin-graphql-loader --save-dev
Usage
In vite.config.ts
or vite.config.js
:
import { defineConfig } from "vite";
import graphqlLoader from "vite-plugin-graphql-loader";
export default defineConfig({
plugins: [graphqlLoader()],
});
Now you can import queries from .gql
or .graphql
files.
example.graphql
:
#import "./ExampleImport.graphql"
fragment ExampleFragment on example {
id
name
}
query ExampleQuery {
example {
...ExampleFragment
...ExampleImport
}
}
example.js
:
import ExampleQuery, { ExampleFragment } from "./example.graphql";
If you have multiple queries in the same file, import them like this:
import { FirstQuery, SecondQuery } from "./example.graphql";
TypeScript
If you are using TypeScript, you will have to declare .gql
or .graphql
files.
Create graphql.d.ts
anywhere in your source directory and
declare module "*.gql";
declare module "*.graphql";
Alternatively, change it to this (replacing .gql with .graphql depending on what you use):
declare module "*.gql" {
const Query: import("graphql").DocumentNode;
export default Query;
export const _queries: Record<string, import("graphql").DocumentNode>;
export const _fragments: Record<
string,
import("graphql").FragmentDefinitionNode
>;
}
And then import fragments and queries like so in order to type them as DocumentNode
and FragmentDefinitionNode
objects.
import Document, { _queries, _fragments } from "./example.graphql";
console.log(Document); // Has type `DocumentNode`
console.log(_queries.ExampleQuery); // Has type `DocumentNode`
console.log(_fragments.ExampleFragment); // Has type `FragmentDefinitionNode`
Changelog
v4.0.1:
- Allow passing
sourceMapOptions
when initializing the plugin to configure how the source map is generated (see options here).noSourceMap
can alternatively be used to disable source map generation. For example, to enable more detailed source maps:
import graphqlLoader from "vite-plugin-graphql-loader";
graphqlLoader({ sourceMapOptions: { hires: true } });
v4.0.0:
- Added source-map generation. Can by disabled by initializing with
graphqlLoader({noSourceMap: true})
. - Refactored code generation to be more maintainable, added more test cases.
- Migrated from
yarn
tobun
.
v3.0.1:
- Switched
await import
statements to top-levelimport
statements (fixes #5 -Top-level await is not available
error). - Added
_queries
and_fragments
for improved module declaration types. - Updated snippets to be defined in TypeScript and then stringified.
v3.0.0:
- Moved from CJS to ESM, inline with Vite 5.0's CJS deprecation. If you are using CommonJS, continue using v2.0 of this package. If you have
"type": "module"
, in yourpackage.json
then it should work as expected.