Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

vite-plugin-graphql-loader

Package Overview
Dependencies
Maintainers
0
Versions
15
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vite-plugin-graphql-loader

A Vite plugin for loading GraphQL files.

  • 4.0.1
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
33K
increased by27.47%
Maintainers
0
Weekly downloads
 
Created
Source

vite-plugin-graphql-loader

NPM

npm version Vite Badge Vitest Badge GraphQL Badge TypeScript Badge

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.

Keywords

FAQs

Package last updated on 16 Jul 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc