Integration with Express

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.

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 Hive Gateway into your Express application with a few lines of code.

Example

import express from "express";
import { createGatewayRuntime } from "@graphql-hive/gateway-runtime";

const app = express();

const serveRuntime = createGatewayRuntime(/* Your configuration */);

// Bind Hive Gateway 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");
});

Offline Usage

By default, GraphiQL code is served from a CDN because to decrease bundle size. If you want to use GraphiQL from a local version, you need to install it manually.

You need to pass imported renderGraphiQL to createGatewayRuntime like below:

Render GraphiQL offline

import express from "express";
import { createGatewayRuntime } from "@graphql-hive/gateway-runtime";
import { renderGraphiQL } from "@graphql-yoga/render-graphiql";

const app = express();

const serveRuntime = createGatewayRuntime({ renderGraphiQL });

// Bind Hive Gateway 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"],
      },
    },
  }),
);

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 Hive Gateway endpoint.

import express from "express";
import helmet from "helmet";
import { createGatewayRuntime } from "@graphql-hive/gateway-runtime";

const app = express();

const serveRuntime = createGatewayRuntime(/* Your configuration */);
const hiveGWRouter = express.Router();
// GraphiQL specific CSP configuration
hiveGWRouter.use(
  helmet({
    contentSecurityPolicy: {
      directives: {
        "style-src": ["'self'", "unpkg.com"],
        "script-src": ["'self'", "unpkg.com", "'unsafe-inline'"],
        "img-src": ["'self'", "raw.githubusercontent.com"],
      },
    },
  }),
);
hiveGWRouter.use(serveRuntime);

// By adding the Hive Gateway router before the global helmet middleware,
// you can be sure that the global CSP configuration will not be applied to the Hive Gateway endpoint
app.use(serveRuntime.graphqlEndpoint, hiveGWRouter);

// 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");
});