vite-plugin-graphql-loader

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:

fragment ExampleFragment on example {
    id
    name
}

query ExampleQuery {
    example {
        ...ExampleFragment
    }
}

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.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 to bun.

v3.0.1:

• Switched await import statements to top-level import 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 your package.json then it should work as expected.