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
  };

  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
onEditQuery	function	Callback triggered when the query is edited
onFetchResult	function	Callback triggered when the query result is fetched