{"id":22900761,"url":"https://github.com/inigolabs/graphql-explorer","last_synced_at":"2026-04-04T04:32:25.315Z","repository":{"id":267669009,"uuid":"900889800","full_name":"inigolabs/graphql-explorer","owner":"inigolabs","description":null,"archived":false,"fork":false,"pushed_at":"2025-05-08T16:19:11.000Z","size":982,"stargazers_count":26,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-08T17:32:34.152Z","etag":null,"topics":["api","explorer","graphql","inigo","react"],"latest_commit_sha":null,"homepage":"https://docs.inigo.io/product/explorer","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/inigolabs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-12-09T16:54:16.000Z","updated_at":"2025-02-25T15:34:03.000Z","dependencies_parsed_at":"2025-01-13T15:30:05.639Z","dependency_job_id":"2b1cf0ee-6dc1-4794-9d73-1556813876eb","html_url":"https://github.com/inigolabs/graphql-explorer","commit_stats":null,"previous_names":["inigolabs/graphql-explorer"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/inigolabs/graphql-explorer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inigolabs%2Fgraphql-explorer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inigolabs%2Fgraphql-explorer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inigolabs%2Fgraphql-explorer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inigolabs%2Fgraphql-explorer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/inigolabs","download_url":"https://codeload.github.com/inigolabs/graphql-explorer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inigolabs%2Fgraphql-explorer/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265793684,"owners_count":23829180,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["api","explorer","graphql","inigo","react"],"created_at":"2024-12-14T01:29:43.713Z","updated_at":"2026-04-04T04:32:25.266Z","avatar_url":"https://github.com/inigolabs.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# GraphQL Explorer Component for React\n\nThis repository contains an open-source **GraphQL Explorer Component** for React, enabling developers to easily integrate an interactive GraphQL playground into their React applications.\n\n## Features\n\nThe GraphQL Explorer is designed with developers in mind, offering features that simplify workflows and enhance productivity. Here’s what it includes:\n\n- **Query Builder:** Construct complex GraphQL queries with an easy-to-use interface.\n- **History:** Quickly access and reuse previous queries.\n- **Saved Collections:** Keep your frequently used queries organized and ready.\n- **Define Extension Headers:** Customize and add extension headers to your GraphQL requests for advanced use cases.\n- **Share Queries:** Share queries with others, whether or not they include variables.\n- **Multi-Tab Support:** Work on multiple queries simultaneously for better multitasking.\n- **Run 10x Options:** Send multiple queries at once to test performance and scalability.\n- **Response Viewer with Headers:** Debug effectively with detailed response and header insights.\n- **Schema Viewer:** Navigate and explore your schema with a visual overview.\n- **PreFlight Scripts:** Set up login or other pre-configurations before running queries.\n- **Local Preferences**: Save and retrieve user preferences, such as layout and active tabs.\n\n---\n\n## Installation\n\nInstall the package via npm or yarn:\n\n```bash\nnpm install @inigolabs/graphql-explorer\n```\n\nor\n\n```bash\nyarn add @inigolabs/graphql-explorer\n```\n\n---\n\n## Usage\n\nImport the `Explorer` component and include it in your application. The `defaultState` prop is **required** to initialize the explorer.\n\n```tsx\nimport \"@inigolabs/graphql-explorer/styles\";\nimport Explorer from \"@inigolabs/graphql-explorer\";\n\nfunction App() {\n  const defaultState = {};\n\n  return (\n    \u003cdiv\u003e\n      \u003cExplorer\n        defaultState={defaultState}\n        onStateChange={(state) =\u003e console.log(\"Explorer state updated:\", state)}\n      /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n---\n\n## API\n\n### **Props**\n\n| Prop            | Type                             | Required | Description                                                                          |\n| --------------- | -------------------------------- | -------- | ------------------------------------------------------------------------------------ |\n| `theme`         | `\"light\"  \\|  \"dark\"`            | No       | Sets the theme for the explorer interface.                                           |\n| `access`        | `\"admin\"  \\|  \"user\"`            | No       | Specifies the access level of the current user.                                      |\n| `defaultState`  | `ExplorerState`                  | Yes      | Initial state for the explorer, including tabs, collections, and layout preferences. |\n| `onStateChange` | `(state: ExplorerState) =\u003e void` | No       | Callback triggered when the state of the explorer changes.                           |\n\n---\n\n## `ExplorerState` Description\n\nThe `ExplorerState` object represents the state of the GraphQL Explorer, which is essential for initializing and managing the component's behavior.\n\n### **Structure**\n\n| Key                | Type                                                     | Description                                                                            |\n| ------------------ | -------------------------------------------------------- | -------------------------------------------------------------------------------------- |\n| `url`              | `string`                                                 | The base URL for the GraphQL endpoint.                                                 |\n| `collections`      | `ExplorerCollection[]`                                   | Saved collections of reusable queries and their variables.                             |\n| `history`          | `ExplorerTabHistoryItem[]`                               | History of previously executed queries.                                                |\n| `headers`          | `string`                                                 | JSON string representing custom headers for GraphQL requests.                          |\n| `envVariables`     | `string`                                                 | JSON string of environment variables used during queries.                              |\n| `preflightScript`  | `string`                                                 | Script executed before sending requests, useful for custom logic.                      |\n| `preflightEnabled` | `boolean`                                                | Flag indicating if the preflight script is enabled.                                    |\n| `tabs`             | `ExplorerTab[]`                                          | Array of tabs representing open queries in the explorer.                               |\n| `activeTabId`      | `string`                                                 | The ID of the currently active tab.                                                    |\n| `proxyEnabled`     | `boolean`                                                | Flag indicating if a proxy is enabled for requests.                                    |\n| `historyEnabled`   | `boolean`                                                | Flag indicating if query history is enabled.                                           |\n| `layout`           | `{ tab?: [number, number]; request?: [number, number] }` | Layout configuration for the explorer's UI components, such as tab and request panels. |\n\n---\n\n### **Children Types**\n\n#### `ExplorerCollection`\n\nRepresents a collection of saved queries.\n\n| Key          | Type                            | Description                                     |\n| ------------ | ------------------------------- | ----------------------------------------------- |\n| `id`         | `string`                        | Unique identifier for the collection.           |\n| `name`       | `string`                        | Name of the collection.                         |\n| `operations` | `ExplorerCollectionOperation[]` | List of operations (queries) in the collection. |\n\n---\n\n#### `ExplorerCollectionOperation`\n\nRepresents an operation (query) within a collection.\n\n| Key         | Type     | Description                     |\n| ----------- | -------- | ------------------------------- |\n| `name`      | `string` | Name of the operation.          |\n| `query`     | `string` | GraphQL query string.           |\n| `variables` | `string` | JSON string of query variables. |\n\n---\n\n#### `ExplorerTab`\n\nRepresents a tab in the explorer.\n\n| Key         | Type                       | Description                                         |\n| ----------- | -------------------------- | --------------------------------------------------- |\n| `id`        | `string`                   | Unique identifier for the tab.                      |\n| `query`     | `string`                   | The GraphQL query in the tab.                       |\n| `variables` | `string`                   | JSON string of variables associated with the query. |\n| `response`  | `ExplorerTabInfoResponse`  | The response data for the query.                    |\n| `doc`       | `ReturnType\u003ctypeof parse\u003e` | Parsed GraphQL document from the query.             |\n\n---\n\n#### `ExplorerTabHistoryItem`\n\nExtends `ExplorerTab` with additional metadata for history entries.\n\n| Key             | Type     | Description                                   |\n| --------------- | -------- | --------------------------------------------- |\n| `operationName` | `string` | The name of the operation in the history.     |\n| `createdAt`     | `string` | Timestamp when the history entry was created. |\n\n---\n\n#### `ExplorerTabInfoResponse`\n\nRepresents the response information for a tab's query.\n\n| Key       | Type     | Description                                 |\n| --------- | -------- | ------------------------------------------- |\n| `data`    | `any`    | The response data from the query.           |\n| `headers` | `any`    | Headers returned from the response.         |\n| `status`  | `number` | HTTP status code of the response.           |\n| `size`    | `number` | Size of the response data in bytes.         |\n| `time`    | `number` | Time taken for the request in milliseconds. |\n\n---\n\n## Contribution\n\nWe welcome contributions to enhance this component. Please follow these steps:\n\n1. Fork the repository.\n2. Install dependencies: `npm install`\n3. Start the development server: `npm run dev`\n4. Create a new branch: `git checkout -b feature-name`.\n5. Commit your changes: `git commit -m 'Add feature'`.\n6. Push the branch: `git push origin feature-name`.\n7. Submit a pull request.\n\n## FAQ\n* To run the Expoler on Next JS, disable server side rendering.\n* create-react-app is deprecated and no longer supported.\n\n---\n\n## License\n\nThis project is licensed under the MIT License. See the [LICENSE](./LICENSE) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finigolabs%2Fgraphql-explorer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Finigolabs%2Fgraphql-explorer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finigolabs%2Fgraphql-explorer/lists"}