GraphQL TypeScript - w/ GraphQL-Modules and GraphQL-Code-Generator

Last year we’ve released GraphQL-Modules — which applies modular approach to large scale, GraphQL-based applications.

We’ve also released a new version of GraphQL Code Generator which generates server-side typings and signatures for resolvers from GraphQL Schemas.

Those are two separate projects, but because we use both in production across many different applications, we wanted to write about the benefits of the tight integration of those projects and how it provides us with great development experience while implementing our projects in TypeScript.

GraphQL Code Generator can take a JS/TS export from GraphQL-Modules to generate server-side typings (or anything else that its plugins can generate). So, let’s export typeDefs without any business logic that includes resolvers, DI, providers etc…

You can create a schema.ts file to expose typeDefs to GraphQL Code Generator:

import { AppModule } from './modules/app'
 
export default AppModule.typeDefs
 
// If your module needs a configuration
 
export default AppModule.forRoot({ ...dummyConfiguration }).typeDefs

Create a codegen.yml config file, including schema.ts as a schema source, and generate common and server typings for TypeScript. We use transpile-only to prevent errors related to TypeScript on typing generation phase to let ts-node handle this on running the actual application.

overwrite: true
schema: ./src/schema.ts
require:
  - ts-node/register/transpile-only
generates:
  ./src/generated-models.ts:
    plugins:
      - typescript
      - typescript-resolvers
    config:
      contextType: @graphql-modules/core#ModuleContext

We can add a script to package.json to run:

{
  //...
 "scripts": {
   //...
    "generate": "gql-gen",
    // You can use nodemon to watch changes on graphql files
    "generate:watch": "nodemon --exec yarn generate -e graphql",
   //...
 //...
}

Then, we can use these typings in our project. This example shows a resolvers handler that implements resolvers for Query type with generated types.

import { UsersProvider } from '../providers/users.provider'
import { IResolvers } from '../../generated-models'
 
export default <IResolvers>{
  Query: {
    // all parameters and return value are typed
    users: (root, args, context, info) => context.injector.get(UsersProvider).getUsers(args)
  }
}

At the end, we have a strictly-typed backend project, based of separate feature modules, and each of those modules uses GraphQL and TypeScript.

You can check our working example that is created by using this approach; https://github.com/darkbasic/graphql-modules-seed

All Posts about GraphQL Modules

• GraphQL Modules — Feature based GraphQL Modules at scale
• Why is True Modular Encapsulation So Important in Large-Scale GraphQL Projects?
• Why did we implement our own Dependency Injection library for GraphQL-Modules?
• Scoped Providers in GraphQL-Modules Dependency Injection
• Writing a GraphQL TypeScript project w/ GraphQL-Modules and GraphQL-Code-Generator
• Authentication and Authorization in GraphQL (and how GraphQL-Modules can help)
• Authentication with AccountsJS & GraphQL Modules
• Manage Circular Imports Hell with GraphQL-Modules

Similar articles

Announcing Accounts.js 1.0 Release Candidate

Introducing Accounts.js 1.0 Release Candidate, an end to end authentication and accounts management solution.

Niccolo Belli • Jan 8th 2024

Building Open Source GraphQL Security

Learn how open-source boosts GraphQL security and explore defensive and offensive tools, resources, and best practices to protect your GraphQL APIs.

Nohé Hinniger-Foray • Dec 8th 2023

Open Source composition and validation library for Apollo Federation

Introducing MIT licensed drop-in replacement for the Apollo Federation composition library.

Kamil Kisiela • Oct 5th 2023

GraphQLConf 2023 Recap

Explore the highlights of GraphQLConf 2023. Learn about the latest trends in GraphQL, from gateway solutions to composite schemas and innovative projects.

Laurin Quast • Sep 25th 2023