bun-graphql-loader
v1.0.3
Published
A Bun plugin for loading GraphQL files.
Downloads
14
Readme
bun-graphql-loader
A Bun plugin for loading GraphQL .gql and .graphql files, using on graphql-tag. Based on vite-plugin-graphql-loader.
Install
bun add --dev bun-graphql-loader
Usage
Calling Bun.build
:
import bunGraphqlLoader from 'bun-graphql-loader';
await Bun.build({
...
plugins: [
...
bunGraphqlLoader(),
...
],
...
});
Using with bun test
:
Create a file called bunGraphqlLoader.ts
with the following content:
import bunGraphqlLoader from "bun-graphql-loader";
import { plugin } from "bun";
plugin(bunGraphqlLoader());
And add it to your bunfig.toml
(customizing the path if necessary):
[test]
preload = [
"./bunGraphqlLoader.ts",
]
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
v1.0.0:
- Adapted from vite-plugin-graphql-loader.