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-graphiqlCustomGraphiQL 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
-
Fork this repo by using the "Fork" button in the upper-right
-
Check out your fork
git clone [email protected]:yournamehere/graphiql.git
-
Install or Update all dependencies
yarn
-
Run development server
yarn dev
-
Push your changes and raise a PR.