# graphiql-cost-plugin

> Plugin for the GraphiQL IDE that displays GraphQL query cost information

Latest version **1.0.6** (published 2022-01-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install graphiql-cost-plugin
pnpm add graphiql-cost-plugin
yarn add graphiql-cost-plugin
bun add graphiql-cost-plugin
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.0.6 |
| Published | 2022-01-11 |
| First published | 2020-10-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | ^12.0.0 |
| Dependencies | 0 |
| Unpacked size | 265.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6 |
| Maintainers | kthakre9 |

## Links

- npm: https://www.npmjs.com/package/graphiql-cost-plugin
- Repository: https://github.com/IBM/graphiql-cost-plugin
- Homepage: https://github.com/IBM/graphiql-cost-plugin#readme
- Issues: https://github.com/IBM/graphiql-cost-plugin/issues
- npm.io page: https://npm.io/package/graphiql-cost-plugin

## Recent versions

- 1.0.6 (latest) — 2022-01-11
- 1.1.0 — 2021-08-17
- 1.0.5 — 2021-05-18
- 1.0.4 — 2021-05-07
- 1.0.3 — 2020-10-28
- 1.0.0 — 2020-10-27

## README

# GraphiQL Cost Plugin
Plugin for the GraphiQL IDE that displays GraphQL query cost and rate limit information.

<p align="center">
<img width="600" src="docs/graphiql_cost_plugin.png">
</p>

## Usage
The plugin is intended to be rendered in a `<GraphiQL.Footer>`. An example usage looks like this:

```javascript
<GraphiQL fetcher={/* pass fetcher here */}>
  <GraphiQL.Footer>
    <CostPlugin
      dataAvailability={/* See details below */}
      costData={/* See details below */}
    />
  </GraphiQL.Footer>
</GraphiQL>
```

The `CostPlugin` expects two props:

* `dataAvailability` is an enum indicating the state of fetching cost data. Possible values are:
  * `'NONE'` to indicate that no data has been loaded, e.g., when initializing GraphiQL
  * `'LOADING'` to indicate that cost data is currently being loaded
  * `'ERROR'` to indicate that there was an error loading cost data
  * `'AVAILABLE'` to indicate data is available and should be rendered (when passing available, the `costData` prop is expected to be passed a valid value)
* `costData` is an object containing cost and rate limit data. Its structure is documented in the [`CostEndpointResponse` type definition](src/types.ts).

For an example of how to use this plugin, checkout the [example folder in this repo](example/).

**Note:** This plugin defines `react` as a peer dependency. I.e., it expects your application to depend on `react`.


## Development
Before being able to build this project, install the dependencies:

```
npm i
```

...and install the `react` peer dependency. This is not needed if running the example in this repo:

```
npm i react --no-save
```

Then, run the development mode (watch code and rebuild on changes):

```
npm run dev
```


...or build the code for publishing:

```
npm run build
```

## License

[MIT](./LICENSE.md)

---
_Source: https://npm.io/package/graphiql-cost-plugin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._