Registry / developer tools / graphiql-schema-search

graphiql-schema-search

library1.2.0jsnpmunverified

A schema search plugin for GraphiQL that allows developers to browse and search types, fields, and root operations with virtual scrolling, deep-linking via URL hash, and browser back/forward support. Version 1.2.0 is the current stable release. This package integrates seamlessly with GraphiQL (v3+) using the plugins system. Key differentiators include full-text search, filtering by kind and section, type detail views, and URL hash-based navigation for deep-linking. It requires peer dependencies: @graphiql/react >= 0.20, graphql >= 15, react >= 17, and react-dom >= 17. The package ships TypeScript type definitions.

developer tools

npm install graphiql-schema-search

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · GRAPHIQL-SCHEMA-SE

graphiql-schema-search

developer toolsjavascriptv1.2.0

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

getSchemaSearchPlugin

✓ import { getSchemaSearchPlugin } from 'graphiql-schema-search';

✗ const getSchemaSearchPlugin = require('graphiql-schema-search');

Package is ESM-only and exports the plugin factory function as a named export. CommonJS require will fail.

style import

✓ import 'graphiql-schema-search/dist/index.css';

✗ import './index.css' or missing import

Styles must be imported separately after the main import. The CSS file is required for proper rendering.

default import (mistake)

✓ import { getSchemaSearchPlugin } from 'graphiql-schema-search';

✗ import getSchemaSearchPlugin from 'graphiql-schema-search';

There is no default export. Using a default import will result in undefined at runtime.

This example shows how to integrate the schema search plugin into a basic GraphiQL application. It imports React, GraphiQL, and the plugin, initializes the plugin, and passes it to the GraphiQL component via the plugins prop.

import React from 'react'; import { createRoot } from 'react-dom/client'; import { GraphiQL } from 'graphiql'; import 'graphiql/graphiql.css'; import { getSchemaSearchPlugin } from 'graphiql-schema-search'; import 'graphiql-schema-search/dist/index.css'; const schemaSearch = getSchemaSearchPlugin(); function App() { return <GraphiQL plugins={[schemaSearch]} />; } const root = createRoot(document.getElementById('root')!); root.render(<App />);

Debug

Known issues

gotchaPlugin only works with GraphiQL v3+ using the plugins prop. GraphiQL v2 is not supported.

fix

Update to GraphiQL v3 and use the plugins prop instead of the legacy extensions API.

affects: >=1.0.0

gotchaURL hash parameters can conflict with other tools that use the URL hash. Use the optional prefix argument to namespace parameters.

fix

Call getSchemaSearchPlugin('myprefix_') to prefix hash parameters.

affects: >=1.0.0

breakingPeer dependency @graphiql/react must be at least version 0.20. Using an older version will cause runtime errors.

fix

Install @graphiql/react >= 0.20: npm install @graphiql/react@^0.20

affects: >=1.0.0

gotchaStyles must be imported separately. Without the CSS import, the plugin will be invisible or look broken.

fix

Add import 'graphiql-schema-search/dist/index.css'; after importing the plugin.

affects: >=1.2.0

gotchaThe package is ESM-only. Using require() will throw an error. Ensure your project is configured for ESM.

fix

Use import syntax and set "type": "module" in package.json or use .mjs extension.

affects: >=1.2.0

Errors

Common errors & fixes

Cannot find module 'graphiql-schema-search'

Package not installed or not in node_modules

fix

Run: npm install graphiql-schema-search

Uncaught TypeError: getSchemaSearchPlugin is not a function

Using default import instead of named import

fix

Change to: import { getSchemaSearchPlugin } from 'graphiql-schema-search';

Module not found: Can't resolve 'graphiql-schema-search/dist/index.css'

CSS file not imported or build tool cannot resolve it

fix

Add the import: import 'graphiql-schema-search/dist/index.css';

Uncaught TypeError: Cannot read properties of undefined (reading 'schema')

Missing peer dependency @graphiql/react or graphql

fix

Install required peer deps: npm install @graphiql/react graphql

graphiql-schema-search: Could not find a GraphiQL context. Make sure you are using this plugin inside a GraphiQL component.

Plugin used outside of GraphiQL or before GraphiQL renders

fix

Ensure the plugin is passed as a value to the plugins prop of the <GraphiQL> component.

Upgrade

Version history

1.2.0latest on npm

Audit

Dependencies

reactrequiredPeer dependency for rendering UI components.

react-domrequiredPeer dependency for DOM rendering.

@graphiql/reactrequiredPeer dependency for GraphiQL plugin system and hooks.

graphqlrequiredPeer dependency for GraphQL schema types and utilities.

Agent activity

10 hits · last 30 days

node

Resources

githubhttps://github.com/robertroeder/graphiql-schema-search ↗

packagegraphiql-schema-search ↗

homepagehttps://github.com/robertroeder/graphiql-schema-search#readme ↗