Get Started | GraphQL Modules

To start using GraphQL Modules, all you need is to install its package and graphql.

Installation

npm i graphql-modules graphql

yarn add graphql-modules graphql

pnpm add graphql-modules graphql

bun add graphql-modules graphql

Your First GraphQL Module

To create a Module, use createModule:

import { createModule, gql } from 'graphql-modules'

export const myModule = createModule({
  id: 'my-module',
  dirname: __dirname,
  typeDefs: [
    gql`
      type Query {
        hello: String!
      }
    `
  ],
  resolvers: {
    Query: {
      hello: () => 'world'
    }
  }
})

Each module contains GraphQL Type definitions, unique id and optionally resolvers.

What Happened Here?

We are using createModule to declare our module, and name it as my-module. Naming is important because it helps you to locate issues in your type definition.

We also added dirname and pointed it to __dirname to make it simpler later to match the exception to the correct file. It’s optional but useful.

Next, there are typeDefs and resolvers which you should already know if you are familiar with GraphQL. It defines the type we have in that module and the implementation behind it.

At this point, this module acts like a type “capsule” you can load and import to various GraphQL Applications.

Use Your Module

As mentioned before, Modules create Application, so let’s create one. We are importing the module we created earlier, and provide it to the application:

import { createApplication } from 'graphql-modules'
import { myModule } from './my-module'

// This is your application, it contains your GraphQL schema and the implementation of it.
const application = createApplication({
  modules: [myModule]
})

// This is your actual GraphQL schema
const mySchema = application.schema

Use Your Application

Now that you have Module, Application and you got your GraphQLSchema, you need to make it available to consumption.

GraphQL-Modules allow you to do much more, like managing the lifecycle of your execution, encapsulating your HTTP request and more. To do that in the most optimal and flexible way, we need to wrap the GraphQL execution flow. Some GraphQL server’s implementation allows this kind of flexibility, and some don’t.

But we got you covered, and provided solutions for all popular GraphQL server implementations.

Your GraphQL Application exposes createExecution and createSubscription methods, which are just plug-and-play replacements for the default functions from graphql-js.

If you are using GraphQL Yoga, you can use useGraphQLModules plugin from Envelop.

import { createServer } from 'node:http'
import { createYoga } from 'graphql-yoga'
import { useGraphQLModules } from '@envelop/graphql-modules'
import { application } from './application'

const yoga = createYoga({
  plugins: [useGraphQLModules(application)]
})

const server = createServer(yoga)

server.listen(4000, () => {
  console.log(`🚀 Server ready`)
})

If you are using Apollo-Server, you can use createApolloExecutor to get an executor that is adapted for this server, and integrates with it perfectly.

import { ApolloServer } from 'apollo-server'
import { application } from './application'

const executor = application.createApolloExecutor()
const schema = application.schema

const server = new ApolloServer({ schema, executor })

server.listen().then(({ url }) => {
  console.log(`🚀 Server ready at ${url}`)
})

If you are using Express-GraphQL, here’s how you do it:

import express from 'express'
import graphqlHTTP from 'express-graphql'
import { application } from './application'

const execute = application.createExecution()
const schema = application.schema

const server = express()

server.use(
  '/',
  graphqlHTTP({
    schema,
    customExecuteFn: execute,
    graphiql: true
  })
)

server.listen(4000, () => {
  console.log(`🚀 Server ready at http://localhost:4000/`)
})

If you are using GraphQL-Helix, here’s how you do it:

import express from 'express'
import { getGraphQLParameters, processRequest } from 'graphql-helix'
import { application } from './application'

const app = express()
app.use(express.json())

app.use('/graphql', async (req, res) => {
  const request = {
    body: req.body,
    headers: req.headers,
    method: req.method,
    query: req.query
  }
  const { operationName, query, variables } = getGraphQLParameters(request)

  const result = await processRequest({
    operationName,
    query,
    variables,
    request,
    schema: application.schema,
    execute: application.createExecution(),
    subscribe: application.createSubscription()
  })

  result.headers.forEach(({ name, value }) => res.setHeader(name, value))
  res.status(result.status)
  res.json(result.payload)
})

app.listen(port, () => {
  console.log(`GraphQL server is running on port ${port}.`)
})

If you are using a different server or setup, you can get the custom execute and subscribe functions from your Application, and provide it to your server:

import { createApplication } from 'graphql-modules'

const application = createApplication({
  /* ... */
})

const schema = application.schema
const execute = application.createExecution()
const subscribe = application.createSubscription()

Tutorial

If you’re interested in a step-by-step tutorial, one of our community members Godwin Ekuma wrote an amazing article explaining “How to modularize GraphQL schema with GraphQL Modules”.