From 773d4e4fd3cbbae1fb1a18f0eec92f02e8d40f85 Mon Sep 17 00:00:00 2001 From: Fabian Breitkreutz Date: Mon, 26 May 2025 10:01:03 +0200 Subject: [PATCH 1/3] docs(express.mdx): describe renderGraphiQL option usage --- .../deployment/node-frameworks/express.mdx | 23 +++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/packages/web/docs/src/content/gateway/deployment/node-frameworks/express.mdx b/packages/web/docs/src/content/gateway/deployment/node-frameworks/express.mdx index 70e7b9ec10..cd58ad6dc6 100644 --- a/packages/web/docs/src/content/gateway/deployment/node-frameworks/express.mdx +++ b/packages/web/docs/src/content/gateway/deployment/node-frameworks/express.mdx @@ -30,6 +30,29 @@ app.listen(4000, () => { }) ``` +## 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: + +```ts filename="Render GraphiQL offline" +import express from 'express' +import { createGatewayRuntime } from '@graphql-hive/gateway-runtime' + +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](https://helmetjs.github.io/) to set your From 5c192e519a684888f5692b48ef9cd3d20fdddf80 Mon Sep 17 00:00:00 2001 From: Fabian Breitkreutz <78473803+maon-fp@users.noreply.github.com> Date: Mon, 26 May 2025 09:06:29 +0000 Subject: [PATCH 2/3] fix(express.mdx): add renderGraphiQL import --- .../src/content/gateway/deployment/node-frameworks/express.mdx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/web/docs/src/content/gateway/deployment/node-frameworks/express.mdx b/packages/web/docs/src/content/gateway/deployment/node-frameworks/express.mdx index cd58ad6dc6..0db8d9c6e8 100644 --- a/packages/web/docs/src/content/gateway/deployment/node-frameworks/express.mdx +++ b/packages/web/docs/src/content/gateway/deployment/node-frameworks/express.mdx @@ -40,6 +40,7 @@ You need to pass imported `renderGraphiQL` to `createGatewayRuntime` like below: ```ts filename="Render GraphiQL offline" import express from 'express' import { createGatewayRuntime } from '@graphql-hive/gateway-runtime' +import { renderGraphiQL } from '@graphql-yoga/render-graphiql'; const app = express() From bab33c3d7028de62e8b560112b6cd81b8ee363b2 Mon Sep 17 00:00:00 2001 From: Fabian Breitkreutz <78473803+maon-fp@users.noreply.github.com> Date: Mon, 26 May 2025 14:10:14 +0000 Subject: [PATCH 3/3] format(express.mdx): prettier --- .../src/content/gateway/deployment/node-frameworks/express.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/web/docs/src/content/gateway/deployment/node-frameworks/express.mdx b/packages/web/docs/src/content/gateway/deployment/node-frameworks/express.mdx index 0db8d9c6e8..9289b886fd 100644 --- a/packages/web/docs/src/content/gateway/deployment/node-frameworks/express.mdx +++ b/packages/web/docs/src/content/gateway/deployment/node-frameworks/express.mdx @@ -40,7 +40,7 @@ You need to pass imported `renderGraphiQL` to `createGatewayRuntime` like below: ```ts filename="Render GraphiQL offline" import express from 'express' import { createGatewayRuntime } from '@graphql-hive/gateway-runtime' -import { renderGraphiQL } from '@graphql-yoga/render-graphiql'; +import { renderGraphiQL } from '@graphql-yoga/render-graphiql' const app = express()