⚛️ Gql Files Def

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.

Usage

• 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 .gql files 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

import {GetInfoClienGQL} from './query.gql';

let infoClient :GqlResponseOf<typeof GetInfoClienGQL>;
let requestClient :GqlVariableOf<typeof GetInfoClienGQL>;

Advice

With ⚡ Vite

Use the plugin vite-plugin-graphql-loader for importing GraphQL files

Typing schema

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