Integration with Express

💡

This page is currently under construction and expected to change. Please feel free to reach out to us directly in case you are having any troubles.

Express is the most popular web framework for Node.js. It is a minimalist framework that provides a robust set of features to handle HTTP on Node.js applications. You can easily integrate GraphQL Mesh into your Express application with a few lines of code.

Example

import express from 'express'
import { createServeRuntime } from '@graphql-mesh/serve-runtime'
 
const app = express()
 
const serveRuntime = createServeRuntime(/* Your configuration */)
 
// Bind GraphQL Mesh to the graphql endpoint to avoid rendering the playground on any path
app.use(serveRuntime.graphqlEndpoint, serveRuntime)
 
app.listen(4000, () => {
  console.log('Running a GraphQL API server at http://localhost:4000/graphql')
})

Using Helmet

If you are using Helmet to set your Content Security Policy, you can use the following configuration:

app.use(
  helmet({
    contentSecurityPolicy: {
      directives: {
        'style-src': ["'self'", 'unpkg.com'],
        'script-src': ["'self'", 'unpkg.com', "'unsafe-inline'"],
        'img-src': ["'self'", 'raw.githubusercontent.com']
      }
    }
  })
)

See GraphiQL documentation page for more informations

Isolate GraphiQL configuration

To avoid applying this configuration to other endpoints you may have on your Express server, you can use Express.Router to create a new router instance and apply the configuration only to the GraphQL Mesh endpoint.

import express from 'express'
import helmet from 'helmet'
import { createServeRuntime } from '@graphql-mesh/serve-runtime'
 
const app = express()
 
const serveRuntime = createServeRuntime(/* Your configuration */)
const meshRouter = express.Router()
// GraphiQL specefic CSP configuration
meshRouter.use(
  helmet({
    contentSecurityPolicy: {
      directives: {
        'style-src': ["'self'", 'unpkg.com'],
        'script-src': ["'self'", 'unpkg.com', "'unsafe-inline'"],
        'img-src': ["'self'", 'raw.githubusercontent.com']
      }
    }
  })
)
meshRouter.use(serveRuntime)
 
// By adding the GraphQL Mesh router before the global helmet middleware,
// you can be sure that the global CSP configuration will not be applied to the GraphQL Mesh endpoint
app.use(serveRuntime.graphqlEndpoint, meshRouter)
 
// Add the global CSP configuration for the rest of your server.
app.use(helmet())
 
// You can know register your other endpoints that will not be affected by the GraphiQL CSP configuration
app.get('/hello', (req, res) => {
  res.send('Hello World!')
})
 
app.listen(4000, () => {
  console.log('Running a GraphQL API server at http://localhost:4000/graphql')
})

Introduction Fastify