stepzen-graphiql

 

Install

``bash
npm install --save stepzen-graphiql
`

Basic Usage

`tsx
import { GraphiQLExplorer } from "stepzen-graphiql";
import "stepzen-graphiql/style.css";

function App() {
const config: GraphiQLConfig = {
endpoint: "https://your-graphql-endpoint.com/graphql",
};

return ;
}
`

Advanced Usage

You can use the GraphiQLExplorer component directly to customize behavior and layout, including:

Providing a custom GraphQL endpoint via config

Showing/hiding the explorer's URL tab

`tsx
import { GraphiQLExplorer, GraphiQLConfig } from "stepzen-graphiql";
import "stepzen-graphiql/style.css";

function App() {
const config: GraphiQLConfig = {
endpoint: "https://your-graphql-endpoint.com/graphql",
showExplorerHeader: true, // Enables the explorer's URL input tab with toggle
theme: "g100", // Sets the theme for the GraphiQL interface (white, g10, g90, g100)
};

function fetchCostData(query: string) {
console.log("Fetching cost data: " + query);
}

function queryCompleted(result: string) {
console.log("Fetched data: " + result);
}

return (
config={config}
onEditQuery={fetchCostData}
onFetchResult={queryCompleted}
>

);
}

export default App;
`

Configuration

| Prop | Type | Description |
| -------------------- | ---------- | -------------------------------------------------------------------------------|
| endpoint | string | GraphQL endpoint to be used in the explorer |
| showExplorerHeader | boolean | Toggles visibility of the URL tab with hide/show functionality |
| theme | string | Theme configuration for the GraphiQL interface ('white', 'g10', 'g90', 'g100') |
| onEditQuery | function | Callback triggered when the query is edited |
| onFetchResult | function | Callback triggered when the query result is fetched |

Styling and Fonts

$3

This package uses a custom font setup to replace GraphiQL's default fonts (Roboto and Fira Code) with IBM Plex Sans.

#### src/styles/graphiql-no-fonts.css

This file contains the complete GraphiQL styles without the embedded font definitions. It's a modified version of the original GraphiQL stylesheet where the @font-face declarations for Roboto and Fira Code have been removed.

Purpose:
- Reduces bundle size by excluding font files
- Allows custom font substitution
- Maintains all GraphiQL styling and layout

#### src/styles/font-override.css

This file overrides the font family references to use IBM Plex Sans instead of Roboto:

`css
* {
font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif !important;
}
`

Why this approach?
- Provides consistent branding with IBM Plex Sans
- Falls back to system fonts if IBM Plex Sans is unavailable
- Ensures all GraphiQL components use the same font family

Note: Make sure IBM Plex Sans fonts are available in your project. You can install them via:
`bash
npm install @ibm/plex
``

And import them in your application's entry point or global styles.