GraphQL Code Generation for Vendure Plugins | Vendure Docs

GraphQL Code Generation

Code generation means the automatic generation of TypeScript types based on your GraphQL schema and your GraphQL operations. This is a very powerful feature that allows you to write your code in a type-safe manner, without you needing to manually write any types for your API calls.

To do this, we will use Graphql Code Generator.

Use npx vendure add and select "Set up GraphQL code generation" to quickly set up code generation.

You can then run npx vendure schema to generate a schema.graphql file in your root directory.

Note

This guide is for adding codegen to your Vendure plugins. For a guide on adding codegen to your storefront, see the Storefront Codegen guide.

Installation

It is recommended to use the vendure add CLI command as detailed above to set up codegen. If you prefer to set it up manually, follow the steps below.

First, install the required dependencies:

npm install -D @graphql-codegen/cli @graphql-codegen/typescript

Configuration

Add a codegen.ts file to your project root with the following contents:

codegen.ts

import type {CodegenConfig} from '@graphql-codegen/cli';const config: CodegenConfig = {    overwrite: true,    // To generate this schema file, run `npx vendure schema`    // whenever your schema changes, e.g. after adding custom fields    // or API extensions    schema: 'schema.graphql',    config: {        // This tells codegen that the `Money` scalar is a number        scalars: { Money: 'number' },        // This ensures generated enums do not conflict with the built-in types.        namingConvention: { enumValues: 'keep' },    },    generates: {        // The path to the generated type file in your        // plugin directory. Adjust accordingly.        'src/plugins/organization/gql/generated.ts': {            plugins: ['typescript'],        },    },};export default config;

Was this chapter helpful?

Report Issue

Edited Feb 12, 2026·View source

src/plugins/organization/services/organization.service.ts

import { Args, Mutation, Query, Resolver } from '@nestjs/graphql';import { Allow, Ctx, PaginatedList, RequestContext, Transaction } from '@vendure/core';import { organizationPermission } from '../constants';import { Organization } from '../entities/organization.entity';import { OrganizationService } from '../services/organization.service';import { QueryOrganizationArgs, MutationCreateOrganizationArgs } from '../gql/generated'; // [!code highlight]@Resolver()export class AdminResolver {    constructor(private organizationService: OrganizationService) {}    @Query()    @Allow(organizationPermission.Read)    organization(@Ctx() ctx: RequestContext, @Args() args: QueryOrganizationArgs): Promise<Organization> { // [!code highlight]        return this.organizationService.findOne(ctx, args.id);    }    @Transaction()    @Mutation()    @Allow(organizationPermission.Create)    createOrganization(        @Ctx() ctx: RequestContext,        @Args() args: MutationCreateOrganizationArgs, // [!code highlight]    ): Promise<Organization> {        return this.organizationService.create(ctx, args.input);    }    // ... etc}

src/plugins/organization/services/organization.service.ts

import { Injectable } from '@nestjs/common';import { RequestContext, TransactionalConnection } from '@vendure/core';import { Organization } from '../entities/organization.entity';import { CreateOrganizationInput, UpdateOrganizationInput } from "../gql/generated"; // [!code highlight]@Injectable()export class OrganizationService {    constructor(private connection: TransactionalConnection) {}    async create(ctx: RequestContext, input: CreateOrganizationInput): Promise<Organization> { // [!code highlight]        return this.connection.getRepository(ctx, Organization).save(new Organization(input));    }    async update(ctx: RequestContext, input: UpdateOrganizationInput): Promise<Organization> { // [!code highlight]        const example = await this.connection.getEntityOrThrow(ctx, Organization, input.id);        const updated = {...example, ...input};        return this.connection.getRepository(ctx, Organization).save(updated);    }}

codegen.ts

import type { CodegenConfig } from '@graphql-codegen/cli';const config: CodegenConfig = {    overwrite: true,    schema: 'http://localhost:3000/admin-api',    config: {        scalars: { Money: 'number' },        namingConvention: { enumValues: 'keep' },    },    generates: {        'apps/marketplace/src/plugins/marketplace/ui/gql/': { // [!code highlight]            preset: 'client', // [!code highlight]            documents: 'apps/marketplace/src/plugins/marketplace/ui/**/*.ts', // [!code highlight]            // This disables the "fragment masking" feature. Fragment masking // [!code highlight]            // can improve component isolation but introduces some additional // [!code highlight]            // complexity that we will avoid for now. // [!code highlight]            presetConfig: { // [!code highlight]                fragmentMasking: false, // [!code highlight]            }, // [!code highlight]        }, // [!code highlight]        'apps/marketplace/src/plugins/marketplace/gql/generated.ts': {            plugins: ['typescript'],        },    },};export default config;

apps/marketplace/src/plugins/marketplace/ui/components/organization-list/organization-list.component.ts

import { ChangeDetectionStrategy, Component } from '@angular/core';import { SharedModule, TypedBaseListComponent } from '@vendure/admin-ui/core';import { graphql } from '../../gql';const getOrganizationListDocument = graphql(` // [!code highlight]    query GetOrganizationList($options: OrganizationListOptions) { // [!code highlight]        organizations(options: $options) { // [!code highlight]            items { // [!code highlight]                id // [!code highlight]                createdAt // [!code highlight]                updatedAt // [!code highlight]                name // [!code highlight]                invoiceEmailAddresses // [!code highlight]            } // [!code highlight]            totalItems // [!code highlight]        } // [!code highlight]    } // [!code highlight]`); // [!code highlight]@Component({    selector: 'organization-list',    templateUrl: './organization-list.component.html',    styleUrls: ['./organization-list.component.scss'],    changeDetection: ChangeDetectionStrategy.OnPush,    standalone: true,    imports: [SharedModule],})export class OrganizationListComponent extends TypedBaseListComponent<    typeof getOrganizationListDocument, // [!code highlight]    'organizations' // [!code highlight]> {        // Sort & filter definitions omitted for brevity.    // For a complete ListComponent example, see the     // "Creating List Views" guide.    constructor() {        super();        super.configure({            document: getOrganizationListDocument, // [!code highlight]            getItems: (data) => data.organizations,            setVariables: (skip, take) => ({                options: {                    skip,                    take,                    filter: {                        name: {                            contains: this.searchTermControl.value,                        },                        ...this.filters.createFilterInput(),                    },                    sort: this.sorts.createSortInput(),                },            }),            refreshListOnChanges: [this.filters.valueChanges, this.sorts.valueChanges],        });    }}

GraphQL Code Generation

Installation

Configuration

GraphQL Code Generation

Installation

Configuration

Running codegen

Using generated types in resolvers & services

Codegen for Admin UI extensions

Use the `graphql()` function

Codegen watch mode

GraphQL Code Generation

Installation

Configuration

GraphQL Code Generation

Installation

Configuration

Running codegen

Using generated types in resolvers & services

Codegen for Admin UI extensions

Use the graphql() function

Codegen watch mode

Use the `graphql()` function