Write your documents in .graphql
files, then import the generated code from .graphql
files in your code!
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
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;
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.
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(),
],
});
(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'],
// ...
],
},
// ...
};
});
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
If you appreciate the work that went into this package, please consider donating.