$ show APIs-guru/graphql-voyager
GraphQL Voyager is an interactive GraphQL schema explorer that visualizes any GraphQL API as an interactive graph. It consumes GraphQL introspection data (or SDL) and renders a navigable representation of the schema's types, fields, and relationships using Graphviz and SVG. The application is built with React and TypeScript, offering multiple consumption methods: a standalone bundle for direct browser use, an NPM package for integration with bundlers like Webpack, and middleware adapters for Express, Hapi, and Koa frameworks. The core functionality involves processing introspection JSON to extract type information, filtering out internal types (like Relay) and deprecated fields, and constructing a graph where nodes represent GraphQL types and edges represent relationships (such as field types). This graph is rendered via a Graphviz worker, with the resulting SVG enhanced for interactivity (tooltips, pan/zoom, click-to-explore). A companion documentation panel allows users to inspect details of selected types, including fields, arguments, and directives. Beyond the visualization, Voyager includes several reusable utilities that demonstrate thoughtful engineering: an LRU cache implemented in localStorage for efficient SVG rendering caching, a React hook for managing promise states (loading, error, success), and a flexible object matching utility. The project maintains a robust development workflow with TypeScript, Webpack, Playwright end-to-end testing (via Docker), and automated dependency updates via Dependabot. Recent commits indicate active maintenance, and the codebase adheres to modern React and TypeScript practices.
The LLM identified 3 files worth highlighting for reuse:
Implements an LRU (Least Recently Used) cache using the browser's localStorage API. Provides get, set, and clear operations with automatic eviction of least recently used items when the cache exceeds a specified size. This self-contained utility requires no dependencies and can be extracted for use in any web application needing client-side caching with predictable memory usage.
A React hook that simplifies handling asynchronous operations by returning the state of a promise (loading, error, success) along with the resolved value. It supports automatic re-execution when dependencies change and includes mechanisms for cancellation to prevent state updates on unmounted components. This hook is framework-agnostic in its logic (only requiring React) and can be reused across any React project managing async data fetching or subprocesses.
Provides a deep matching function that checks if an object conforms to a given pattern, supporting wildcards, regular expressions, and nested property matching. Unlike simple equality checks, this utility allows flexible, partial matching of complex objects—useful in testing, filtering, or validation scenarios where exact matches are too restrictive. It has zero dependencies and operates purely on plain JavaScript objects.