stepzen-graphiql

Install

npm install --save stepzen-graphiql

Basic Usage

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

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

  return <GraphiQLExplorer config={config} />;
}

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

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 (
    <GraphiQLExplorer
      config={config}
      onEditQuery={fetchCostData}
      onFetchResult={queryCompleted}
    >
    </GraphiQLExplorer>
  );
}

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

Custom Font Configuration

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:

* {
  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:

npm install @ibm/plex

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