Skip to content

feat: support GraphQL Code Generator 7 and modern Vite/graphql majors #8

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
smolinari wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: support GraphQL Code Generator 7 and modern Vite/graphql majors #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions packages/codegen-plugin/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@dreamonkey/graphql-codegen-vue-apollo-plugin",
"version": "0.1.2",
"version": "0.2.0",
"description": "graphql-typed-document-node compatible GraphQL Code Generator plugin for Vue Apollo",
"author": "Dreamonkey Srl <info@dreamonkey.com> (https://dreamonkey.com)",
"contributors": [
Expand Down Expand Up @@ -37,20 +37,20 @@
},
"peerDependencies": {
"@apollo/client": "^3.6.0",
"@graphql-codegen/near-operation-file-preset": "^2.4.4 || ^3.0.0",
"@graphql-codegen/typed-document-node": "^2.3.6 || ^3.0.0 || ^4.0.0 || ^5.0.0",
"@graphql-codegen/typescript": "^2.8.1 || ^3.0.0 || ^4.0.0",
"@graphql-codegen/typescript-operations": "^2.5.6 || ^3.0.0 || ^4.0.0",
"@graphql-codegen/near-operation-file-preset": "^2.4.4 || ^3.0.0 || ^5.0.0",
"@graphql-codegen/typed-document-node": "^2.3.6 || ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0",
"@graphql-codegen/typescript": "^2.8.1 || ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0",
"@graphql-codegen/typescript-operations": "^2.5.6 || ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0",
"@vue/apollo-composable": "^4.0.0-beta.1",
"graphql": "^15.0.0 || ^16.0.0",
"vue": "^3.2.0"
},
"devDependencies": {
"@types/node": "^16.18.12",
"graphql": "^15.8.0",
"graphql": "^16.0.0",
"unbuild": "^2.0.0"
},
"dependencies": {
"@graphql-codegen/plugin-helpers": "^2.7.2"
"@graphql-codegen/plugin-helpers": "^2.7.2 || ^5.0.0 || ^7.0.0"
}
}
103 changes: 56 additions & 47 deletions packages/codegen-plugin/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,54 +1,63 @@
import { type CodegenPlugin } from '@graphql-codegen/plugin-helpers';
import { type OperationDefinitionNode } from 'graphql';
import {
type CodegenPlugin,
type PluginFunction,
} from '@graphql-codegen/plugin-helpers';
import { Kind, OperationTypeNode, type OperationDefinitionNode } from 'graphql';
import { createMutationProcessor, mutationDependecies } from './mutation.js';
import { createQueryProcessor, queryDependecies } from './query.js';
import { uniqueArray } from './utils.js';

const codegenPlugin: CodegenPlugin = {
// Since this plugin is designed to work only with near-operation-file, there will always only be 1 document file at a time
// TODO: Support multiple documents
plugin(schema, [documentFile]) {
if (!documentFile) {
return '';
}
const { document } = documentFile;
if (!document) {
return '';
}

const queryType = schema.getQueryType();
if (!queryType) {
return '';
}

const operations = document.definitions.filter(
(definition): definition is OperationDefinitionNode =>
definition.kind === 'OperationDefinition',
);

const queryFields = queryType.getFields();
const queryContents = operations
.filter(({ operation }) => operation === 'query')
.map(createQueryProcessor(queryFields))
.filter((content): content is string => content !== undefined);

const mutationContents = operations
.filter(({ operation }) => operation === 'mutation')
.map(createMutationProcessor())
.filter((content): content is string => content !== undefined);

const haveQueries = queryContents.length > 0;
const haveMutations = mutationContents.length > 0;

return {
prepend: uniqueArray([
...(haveQueries ? queryDependecies : []),

...(haveMutations ? mutationDependecies : []),
]),
content: queryContents.join('\n') + mutationContents.join('\n'),
};
},
// Exported as a named `plugin` (not only via the default object) so GraphQL Code
// Generator can resolve the plugin function whether the module is loaded with ESM
// `import` or CJS `require`. codegen 7 loads custom plugins via `import`, which only
// sees named/default exports of this `"type": "module"` package; a default-only
// export fails with `does not export a valid JS object with "plugin" function`.
// Since this plugin is designed to work only with near-operation-file, there will
// always only be 1 document file at a time.
// TODO: Support multiple documents
export const plugin: PluginFunction = (schema, [documentFile]) => {
if (!documentFile) {
return '';
}
const { document } = documentFile;
if (!document) {
return '';
}

const queryType = schema.getQueryType();
if (!queryType) {
return '';
}

const operations = document.definitions.filter(
(definition): definition is OperationDefinitionNode =>
definition.kind === Kind.OPERATION_DEFINITION,
);

const queryFields = queryType.getFields();
const queryContents = operations
.filter(({ operation }) => operation === OperationTypeNode.QUERY)
.map(createQueryProcessor(queryFields))
.filter((content): content is string => content !== undefined);

const mutationContents = operations
.filter(({ operation }) => operation === OperationTypeNode.MUTATION)
.map(createMutationProcessor())
.filter((content): content is string => content !== undefined);

const haveQueries = queryContents.length > 0;
const haveMutations = mutationContents.length > 0;

return {
prepend: uniqueArray([
...(haveQueries ? queryDependecies : []),

...(haveMutations ? mutationDependecies : []),
]),
content: queryContents.join('\n') + mutationContents.join('\n'),
};
};

const codegenPlugin: CodegenPlugin = { plugin };

export default codegenPlugin;
4 changes: 2 additions & 2 deletions packages/codegen-plugin/src/mutation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { OperationDefinitionNode } from 'graphql';
import { Kind, OperationDefinitionNode } from 'graphql';
import { toPascalCase, unindent } from './utils.js';

// For tree-shaking purposes, use named imports for non-type imports
Expand Down Expand Up @@ -42,7 +42,7 @@ export function createMutationProcessor() {

// Mutations should contain their first selection as the field/mutation name on the GraphQL schema
const field = selectionSet.selections[0];
if (field?.kind !== 'Field') {
if (field?.kind !== Kind.FIELD) {
console.warn('[vue-apollo] Skipping mutation with no field');
return;
}
Expand Down
3 changes: 2 additions & 1 deletion packages/codegen-plugin/src/query.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import {
GraphQLFieldMap,
Kind,
OperationDefinitionNode,
isListType,
isNonNullType,
Expand Down Expand Up @@ -30,7 +31,7 @@ export function createQueryProcessor(queryFields: GraphQLFieldMap<any, any>) {
}
// Queries should contain their first selection as the field name on the GraphQL schema
const field = selectionSet.selections[0];
if (field?.kind !== 'Field') {
if (field?.kind !== Kind.FIELD) {
console.warn('[vue-apollo] Skipping query with no field');
return;
}
Expand Down
4 changes: 2 additions & 2 deletions packages/near-operation-file/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@dreamonkey/graphql-codegen-near-operation-file",
"version": "0.1.2",
"version": "0.2.0",
"description": "Write your documents in `.graphql` files, then import the generated code from `.graphql` files in your code!",
"author": "Dreamonkey Srl <info@dreamonkey.com> (https://dreamonkey.com)",
"contributors": [
Expand Down Expand Up @@ -36,7 +36,7 @@
"test": "echo \"TODO: Implement tests\""
},
"peerDependencies": {
"vite": "^2.0.0 || ^3.0.0 || ^4.0.0"
"vite": "^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0"
},
"devDependencies": {
"@types/node": "^16.18.12",
Expand Down
8 changes: 4 additions & 4 deletions packages/vue-query-block/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@dreamonkey/graphql-codegen-vue-query-block",
"version": "0.1.2",
"version": "0.2.0",
"description": "Write your GraphQL documents in Vue SFC `<query>` blocks to generate code with GraphQL Code Generator.",
"author": "Dreamonkey Srl <info@dreamonkey.com> (https://dreamonkey.com)",
"contributors": [
Expand Down Expand Up @@ -41,15 +41,15 @@
"test": "echo \"TODO: Implement tests\""
},
"peerDependencies": {
"@graphql-codegen/core": "^2.6.0 || ^3.0.0 || ^4.0.0",
"@graphql-codegen/core": "^2.6.0 || ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0",
"@vue/compiler-sfc": "^3.2.0",
"graphql": "^15.0.0 || ^16.0.0",
"vite": "^2.0.0 || ^3.0.0 || ^4.0.0"
"vite": "^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0"
},
"devDependencies": {
"@types/node": "^16.18.12",
"@vue/compiler-sfc": "^3.2.47",
"graphql": "^15.8.0",
"graphql": "^16.0.0",
"unbuild": "^2.0.0",
"vite": "^2.9.16"
}
Expand Down
Loading