vite-plugin-graphql-loader

vite-plugin-graphql-loader

A Vite plugin for loading GraphQL .gql and .graphql files, based on graphql-tag/loader

If you are using TypeScript, I recommend using GraphQL Codegen and vite-plugin-graphql-codegen instead to generate TypesScript interfaces for your queries and fragments.

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 are using TypeScript, you will have to declare .gql or .graphql files:

graphql.d.ts:

declare module "*.gql";
declare module "*.graphql";

// Or if you aren't using fragments:
// declare module "*.gql" {
//     const Query: import("graphql").DocumentNode;
//     export default Query;
// }

Changelog

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.