Skip to content

Latest commit

 

History

History

near-operation-file

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 
 
 
 
 

@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:

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.