https://github.com/mammadataei/vite-plugin-graphiql

Integrate GraphiQL IDE in your Vite projects
https://github.com/mammadataei/vite-plugin-graphiql

Last synced: 3 months ago
JSON representation

Integrate GraphiQL IDE in your Vite projects

• Host: GitHub
• URL: https://github.com/mammadataei/vite-plugin-graphiql
• Owner: mammadataei
• License: mit
• Created: 2022-12-06T08:20:21.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2024-08-24T01:50:13.000Z (5 months ago)
• Last Synced: 2024-09-24T04:19:14.766Z (4 months ago)
• Language: TypeScript
• Size: 146 KB
• Stars: 6
• Watchers: 1
• Forks: 0
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE
  • Code of conduct: .github/CODE_OF_CONDUCT.md

Awesome Lists containing this project

• fucking-awesome-vite - Vite-plugin-graphiql - Integration for GraphiQL IDE. (Plugins / Framework-agnostic Plugins)
• awesome-vite - Vite-plugin-graphiql - Integration for GraphiQL IDE. (Plugins / Framework-agnostic Plugins)

README

        



Vite + GraphqiQL


Integrate GraphiQL IDE in your Vite projects





Please note that this plugin is only intended to be used in development mode.

## Getting Started

First, install the plugin:

```bash

npm install --save-dev vite-plugin-graphiql

yarn add --dev vite-plugin-graphiql

pnpm add --save-dev vite-plugin-graphiql

```

[GraphiQL](https://github.com/graphql/graphiql/blob/main/packages/graphiql/README.md#using-as-package)

requires [`graphql`](https://github.com/graphql/graphql-js) to be installed in

your project; so install that too if you haven't already.

Then, import and add the plugin to your `vite.config.ts` and pass in the

required configuration options:

```ts

import { defineConfig } from 'vite'

import graphiql from 'vite-plugin-graphiql'

export default defineConfig({

  plugins: [

    graphiql({

      client: {

        url: 'https://mygraphqlapi.com/graphql',

      },

    }),

  ],

})

```

Now start your dev server and navigate to `http://localhost:5173/__graphiql` to

see the GraphiQL IDE.

## Configuration

You can find the full configuration options [here](src/types.ts).

## Acknowledgments

Inspired by

[@unocss/inspector](https://github.com/unocss/unocss/tree/main/packages/inspector)

## License

Licensed under the [MIT License](LICENSE).