custom-graphiql

CustomGraphiQL

A custom wrapper around graphiql package which offers more utility button and a component which allows to query any graphql endpoint. Inspired from graphiql-app but within browser without requirement for an app.

Try it out here: https://graphiql-ide.netlify.com/

Getting started

npm install --save custom-graphiql
# OR
yarn add custom-graphiql

CustomGraphiQL is React component which wraps existing GraphiQL component. It can be directly hosted on your server. Check the example directory for how to setup CustomGraphiQL on any endpoint of your express server.

Build for the web with webpack or browserify, or use the pre-bundled custom-graphiql.js file. See the example in the git repository to see how to use the pre-bundled file. Alternatively you can get custom-graphiql.js or custom-graphiql.min.js from the releases page.

Don't forget to include the CSS file on the page! If you're using npm, you can find it in node_modules/custom-graphiql/custom-graphiql.css, or you can download it from the releases page.

It can be directly hosted on your server. Check out the example in thie repository for how to setup CustomGraphiQL on any endpoint of your express server.

Features

• Generates stub mutation by scanning you schema.
• Share current query using Get or Set query button.

Usage

CustomGraphiQL exports a single React component and it can further customized.

import CustomGraphiQL from 'custom-graphiql';

<CustomGraphiQL />

CustomGraphiQL supports all the props and children accepted by GraphiQL except the fetcher prop. The fetch function is implemented within the component and hence no fetcher props is required for CustomGraphiQL component. Check here for description of available props and children and their example usage.

Contributing

1. Fork this repo by using the "Fork" button in the upper-right

2. Check out your fork

   git clone [e-mail]:yournamehere/graphiql.git
   

3. Install or Update all dependencies

   yarn
   

4. Run development server

   yarn dev
   

5. Push your changes and raise a PR.