This npm Codegen plugin automatically generates TypeScript definition files (.d.ts) for GraphQL files (.gql), making it easier to integrate and ensure strict typing in TypeScript applications.
- Installation
npm i -D gql-files-def- Configuration : Add the plugin to your codegen config
import type { CodegenConfig } from '@graphql-codegen/cli'; const config: CodegenConfig = { documents: ['src/**/*.gql', 'src/**/*.graphql'], schema: './schema.graphql', generates: { './src/__graphql__/graphql-operations.ts': { plugins: ['typescript', 'typescript-operations', './tools/gql-type-def.js'] } } }; export default config;- Code : In you code you can import and direct use
.gqlfiles with strict type
import {GetInfoClienGQL} from './query.gql'; const result = await new GraphQLClient('https://graphql.com').request(GetInfoClienGQL,{id:"123"})- Utils :
- If you need to use variables types of query, you can use
GqlResponseOf - If you need to use variables types of query, you can use
GqlVariablesOf
- If you need to use variables types of query, you can use
import {GetInfoClienGQL} from './query.gql'; let infoClient :GqlResponseOf<typeof GetInfoClienGQL>; let requestClient :GqlVariableOf<typeof GetInfoClienGQL>;With ⚡ Vite
Use the plugin vite-plugin-graphql-loader for importing GraphQL files
Use the plugin Schema-ast so that your tools (IDE) can offer you typing
{ "generates": { "./schema.graphql": { "plugins": [ "schema-ast" ], "config": { "includeDirectives": true } } } }MIT License © Franck RST