zendro-graphiql

The official GraphiQL (v5, Monaco-based), packaged as a mountable Express router, with two optional UI extensions that are both off by default:

• Auth toolbar button - a "Login"/"Logout" button that talks to whatever /auth/* endpoints the page is served from (root-absolute URLs: /auth/login, /auth/session, /auth/logout). This package holds no credentials and runs no auth logic itself - it just reflects a boolean (show the button or don't) into the served page. The consuming app (typically graphql-server) owns and runs the actual OAuth2 backend; a separate deployment (like graphiql-auth) that has none of its own reverse-proxies /auth/* to one that does.
• jq/JSONPath filter panel - a GraphiQL plugin that replays the active tab's query against /meta_query, filtering the response with a jq or JSONPath expression. Same story: this package just shows/hides the panel, the consuming app owns the /meta_query endpoint.

Both extensions are self-contained and independently toggleable; a bare GraphiQL() call renders nothing beyond stock GraphiQL.

Install

Not published to npm - consumed as a git submodule + file: dependency:

git submodule add https://github.com/Zendro-dev/zendro-graphiql.git zendro-graphiql
npm install   # picks up "zendro-graphiql": "file:zendro-graphiql" from package.json

The submodule ships its src/ (the router) but not its built SPA - build it once (and after every submodule update):

npm --prefix zendro-graphiql run build

Usage

const express = require("express");
const GraphiQL = require("zendro-graphiql");

const app = express();

// Mount at any path - the SPA and its toolbar button only ever make
// root-absolute (/auth/*, /meta_query) or page-relative (its own assets)
// requests, so GraphiQL() itself has no notion of where anything else in
// your app lives.
app.use("/graphiql", GraphiQL({ features: { auth: true, filter: true } }));

Options reference

Option	Description
features.auth	Defaults to false. Shows the login/logout toolbar button, which calls /auth/login, /auth/session, /auth/logout at whatever origin served the page. You're responsible for actually handling those routes elsewhere in your app (or via a reverse proxy) - this package never mounts them.
features.filter	Defaults to false. Adds the jq/JSONPath panel, which POSTs to the fixed /meta_query path - same story, you own that endpoint.

Routes

Route	Purpose
GET <mount>/	The GraphiQL SPA.

Development

npm --prefix graphiql-app install
npm --prefix graphiql-app run dev    # Vite dev server for the SPA itself
npm test                             # router tests (node:test, no browser needed)