Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/0x31/bun-graphql-loader
A Bun plugin for loading GraphQL files.
https://github.com/0x31/bun-graphql-loader
bun bun-loader bun-plugin graphql typescript
Last synced: 28 days ago
JSON representation
A Bun plugin for loading GraphQL files.
- Host: GitHub
- URL: https://github.com/0x31/bun-graphql-loader
- Owner: 0x31
- License: isc
- Created: 2024-07-16T06:30:08.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-08-12T23:05:00.000Z (5 months ago)
- Last Synced: 2024-11-16T18:39:03.462Z (about 1 month ago)
- Topics: bun, bun-loader, bun-plugin, graphql, typescript
- Language: JavaScript
- Homepage: https://npmjs.com/package/bun-graphql-loader
- Size: 52.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# bun-graphql-loader
A Bun plugin for loading GraphQL .gql and .graphql files, using on [graphql-tag](https://github.com/apollographql/graphql-tag). Based on [vite-plugin-graphql-loader](https://www.npmjs.com/package/vite-plugin-graphql-loader).
## Install
```bash
bun add --dev bun-graphql-loader
```
## Usage
Calling `Bun.build`:
```typescript
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:
```ts
import bunGraphqlLoader from "bun-graphql-loader";
import { plugin } from "bun";
plugin(bunGraphqlLoader());
```
And add it to your `bunfig.toml` (customizing the path if necessary):
```toml
[test]
preload = [
"./bunGraphqlLoader.ts",
]
```
Now you can import queries from `.gql` or `.graphql` files.
`example.graphql`:
```graphql
#import "./ExampleImport.graphql"
fragment ExampleFragment on example {
id
name
}
query ExampleQuery {
example {
...ExampleFragment
...ExampleImport
}
}
```
`example.js`:
```javascript
import ExampleQuery, { ExampleFragment } from "./example.graphql";
```
If you have multiple queries in the same file, import them like this:
```javascript
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
```typescript
declare module "*.gql";
declare module "*.graphql";
```
**_Alternatively_**, change it to this (replacing .gql with .graphql depending on what you use):
```typescript
declare module "*.gql" {
const Query: import("graphql").DocumentNode;
export default Query;
export const _queries: Record;
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.
```typescript
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](https://www.npmjs.com/package/vite-plugin-graphql-loader).