https://github.com/OneGraph/graphiql-explorer

Explorer plugin for GraphiQL
https://github.com/OneGraph/graphiql-explorer

Last synced: 12 days ago
JSON representation

Explorer plugin for GraphiQL

• Host: GitHub
• URL: https://github.com/OneGraph/graphiql-explorer
• Owner: OneGraph
• License: mit
• Created: 2018-12-12T19:57:21.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2023-05-17T09:45:33.000Z (over 1 year ago)
• Last Synced: 2024-04-14T10:12:05.214Z (7 months ago)
• Language: JavaScript
• Size: 1.36 MB
• Stars: 895
• Watchers: 20
• Forks: 94
• Open Issues: 56
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-list - graphiql-explorer

README

        
Interactive explorer plugin for GraphiQL.

Try it live at [https://www.onegraph.com/graphiql](https://www.onegraph.com/graphiql).

[OneGraph](https://www.onegraph.com) provides easy, consistent access to the APIs that underlie your business--all through the power of GraphQL.

Sign up at [https://www.onegraph.com](http://www.onegraph.com).

[![npm version](http://img.shields.io/npm/v/graphiql-explorer.svg?style=flat)](https://npmjs.org/package/graphiql-explorer "View this project on npm")

## Example usage

See the [example repo](https://github.com/OneGraph/graphiql-explorer-example) for how to use OneGraph's GraphiQL Explorer in your own GraphiQL instance.

![Preview](https://user-images.githubusercontent.com/476818/51567716-c00dfa00-1e4c-11e9-88f7-6d78b244d534.gif)

[Read the rationale on the OneGraph blog](https://www.onegraph.com/blog/2019/01/24/How_OneGraph_onboards_users_new_to_GraphQL.html).

## Customizing styles

The default styling matches for the Explorer matches the default styling for GraphiQL. If you've customized your GraphiQL styling, you can customize the Explorer's styling to match.

### Customizing colors

The Explorer accepts a `colors` prop as a map of the class names in GraphiQL's css to hex colors. If you've edited the GraphiQL class names that control colors (e.g. `cm-def`, `cm-variable`, `cm-string`, etc.) use those same colors in the colors map. The naming of the keys in the colors map tries to align closely with the names of the class names in GraphiQL's css (note that the Explorer can't just apply the classes because of conflicts with how the css file styles inputs).

Example style map:

```javascript

```

### Customizing arrows and checkboxes

The explorer accepts props for setting custom checkboxes (for leaf fields) and arrows (for object fields).

The props are `arrowOpen`, `arrowClosed`, `checkboxChecked`, and `checkboxUnchecked`. You can pass any react node for those props.

The defaults are

arrowOpen

```javascript

  

    

  

```

arrowClosed

```javascript

  

    

  

```

checkboxChecked

```

  

    

  

  ```

checkboxUnchecked

```

  

    

  

```

### Customizing the buttons to create new operations

You can modify the styles for the buttons that allow you to create new operations.

Pass the `styles` prop when you create the component. It's an object with two keys, `explorerActionsStyle` and `buttonStyle`.

Example styles map:

```javascript

```