@dreamonkey/graphql-codegen-near-operation-file

Write your documents in .graphql files, then import the generated code from .graphql files in your code!

Installation

Make sure you have installed and configured GraphQL Code Generator and the near-operation-file preset first:

• GraphQL Code Generator | Installation
• GraphQL Code Generator | Near Operation File Preset

Install the package:

pnpm add -D @dreamonkey/graphql-codegen-near-operation-file

GraphQL Code Generator config

Configure the near-operation-file preset to use .graphql.ts extension:

// codegen.ts
import type { CodegenConfig } from '@graphql-codegen/cli';

const config: CodegenConfig = {
  // ...
  generates: {
    // ...
    'src/': {
      preset: 'near-operation-file',
      presetConfig: {
        extension: '.graphql.ts', // <--- This is the important part
        // ...
      },
      // ...
    },
  },
  // ...
};

export default config;

.gitignore

Add the following line to your .gitignore file:

# GraphQL Code Generator
src/**/*.graphql.ts

If you are using a different folder instead of src/ in codegen.ts > generates, adjust the path above accordingly.

Vite config

Add the plugin to your Vite config:

// vite.config.ts
import { defineConfig } from 'vite';
import graphqlNearOperationFile from '@dreamonkey/graphql-codegen-near-operation-file';

export default defineConfig({
  plugins: [
    // ...
    graphqlNearOperationFile(),
  ],
});

Quasar Framework (@quasar/app-vite)

(App Extension is coming soon) If you are not using the App Extension, you can add the plugin to your quasar.config.js:

// quasar.config.js
const { configure } = require('quasar/wrappers');

module.exports = configure(function (/* ctx */) {
  return {
    // ...
    build: {
      // ...
      vitePlugins: [
        // ...
        ['@dreamonkey/graphql-codegen-near-operation-file'],
        // ...
      ],
    },
    // ...
  };
});

Usage

Define your documents in .graphql files:

# src/composables/posts.graphql
fragment PostDetails on Post {
  id
  title
  body
}

query getPosts {
  posts {
    ...PostDetails
  }
}

GraphQL Code Generator will generate the corresponding code as .graphql.ts files.

Then, you will be able to import the generated code from .graphql files in a natural fashion:

// src/composables/posts.ts
import {
  useGetPostsQuery,
  GetPostsDocument,
  PostDetailsFragment,
} from './posts.graphql';

// Use the generated code

Donate

If you appreciate the work that went into this package, please consider donating.