Registry / devops / ts-graphql-plugin

ts-graphql-plugin

library4.0.5jsnpmunverified

A TypeScript Language Service Plugin that provides GraphQL features like auto-completion, diagnostics, type generation, and fragment navigation directly inside TypeScript IDE. Current stable version is 4.0.5, with a monthly release cadence. It supports TypeScript ≥4.8, GraphQL ≥15, and Node ≥18. Differentiators include CLI commands for typegen, extract, validate, and report, plus a webpack transformer for compile-time query-to-AST conversion. Ships TypeScript types.

devops

npm install ts-graphql-plugin

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · TS-GRAPHQL-PLUGIN

ts-graphql-plugin

devopsjavascriptv4.0.5

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

✓ import tsGraphqlPlugin from 'ts-graphql-plugin'

✗ const tsGraphqlPlugin = require('ts-graphql-plugin')

ESM-only since v4; CommonJS not supported.

TypegenAddon

✓ import { TypegenAddon } from 'ts-graphql-plugin'

✗ import { TypegenAddon } from 'ts-graphql-plugin/out'

TypegenAddon is a named export, not a subpath export.

WebpackTransformer

✓ import { WebpackTransformer } from 'ts-graphql-plugin'

✗ import { webpackTransformer } from 'ts-graphql-plugin'

Exported as PascalCase WebpackTransformer.

Shows tsconfig plugin setup, template literal tag for GraphQL query, CLI typegen, and usage of generated types.

// In tsconfig.json: // { // "compilerOptions": { // "plugins": [ // { // "name": "ts-graphql-plugin", // "schema": "http://localhost:4000/graphql" // } // ] // } // } // Then in your .ts file: import { graphql } from './graphql-client'; const query = `#graphql query GetUser($id: ID!) { user(id: $id) { name email } } `; // Run CLI typegen: // npx ts-graphql-plugin typegen // Import generated types: import { GetUserQuery } from './__generated__/graphql'; const getUser = async (id: string): Promise<GetUserQuery> => { return graphql(query, { id }); };

Debug

Known issues

breakingVersion 4.0 drops CommonJS support; only ESM modules are published.

fix

Switch to ESM: use 'import' instead of 'require', and ensure your project is configured for ESM (e.g., 'type': 'module' in package.json).

affects: >=4.0

deprecatedThe 'graphql-tag' package is no longer required; use template literals with '#graphql' comment instead.

fix

Replace gql`...` with `#graphql\n  ...` or a plain string.

affects: >=3.0

gotchaThe plugin requires a valid GraphQL schema URL or file path in tsconfig; otherwise no completions/diagnostics.

fix

Ensure 'schema' option points to a reachable introspection endpoint or local .graphql file.

affects: >=1.0

gotchaTypegen includes only queries and mutations tagged with a template literal containing '#graphql' comment; plain strings are ignored.

fix

Use tagged template literal with 'graphql' tag or include '#graphql' as first line comment.

affects: >=3.0

Errors

Common errors & fixes

Cannot find module 'ts-graphql-plugin' or its corresponding type declarations.

Package not installed or peer dependencies missing.

fix

Run 'npm install ts-graphql-plugin graphql typescript -D' and ensure TypeScript version ≥4.8.

The 'ts-graphql-plugin' package did not find a valid GraphQL schema.

Schema path/URL is incorrect or not accessible.

fix

Check 'schema' in tsconfig.json plugins section; use a valid URL or absolute path.

TypeScript language service plugin error: 'ts-graphql-plugin' is not a valid plugin.

Plugin name misspelled or tsconfig not reloaded.

fix

Verify 'name' is exactly 'ts-graphql-plugin' and restart your editor.

Error: Cannot use import statement outside a module.

Running in CommonJS environment but package is ESM-only since v4.

fix

Set 'type': 'module' in package.json or use dynamic import().

Upgrade

Version history

4.0.5latest on npm

Audit

Dependencies

graphqlrequiredPeer dependency for GraphQL schema and operations

typescriptrequiredPeer dependency for TypeScript language service integration

Agent activity

8 hits · last 30 days

node

Resources

githubhttps://github.com/Quramy/ts-graphql-plugin ↗

packagets-graphql-plugin ↗

homepagehttps://github.com/Quramy/ts-graphql-plugin#readme ↗