Vite-plugin-graphql-codegen-optimized

This project is heavily inspired by vite-plugin-graphql-codegen, but with some optimizations/fixes.

Changes compared to the original plugin

- Only runs the generator when a query is actually changed, not on every unrelated file change.
- Shows errors in the browser, which makes development easier
- Restarts are more reliable

Missing features

(Got any ideas? Open an issue!)

Usage

Add the plugin to your vite.config.ts file:

``ts
import codegen from "@rubennl/vite-plugin-graphql-codegen-optimized";

export default defineConfig({
plugins: [
codegen()
]
});
`

Keybindings

$3

Manually triggers the codegen. (can be disabled, see options)

Options (all optional)

| Option | Type | Default | Description |
|------------------------|-----------|-----------------------------------------|-----------------------------------------------------------------------------------------------|
| codegenConfigFile | string | Auto detected by @graphql-codegen/cli | The name of the codegen config file |
| outputPath | string | Auto detected | Filter used to detect if a file should be processed |
| reloadDelay | number | 100 | The delay in ms before the browser reloads. Set to -1 to use vite default, or disable |
| showPopups | boolean | true | Show popups in the browser when something goes wrong |
| runOnStart | boolean | true | Run the codegen on vite startup |
| showSuggestions | boolean | true | Show suggestions to improve performance |
| watchSchema | boolean | true | Watch the schema file(s) for changes |
| restartAfterGenerate | boolean | true | Restart Vite when the codegen is done. Disabling this isn't recommended or guaranteed to work |
| enableKeybind | boolean | true | Registers the "g" keybind to manually trigger the codegen |

Known issues

When using the h + enter` keybind to show vite help, vite will show the default items twice. This is resolved by this PR: https://github.com/vitejs/vite/pull/15881