NightingQL Vue Component Library

A Vue 3 component library for querying and visualizing GraphQL data out-of-the-box. Includes a plugin for fetching and caching GraphQL schemas, and a set of ready-to-use widgets (StatsWidget, TextEditor, BarChart, PieChart, LineChart, etc).

Installation

npm install nightingql-vue@latest

Peer Dependencies

Make sure to install these in your consuming project:

npm install vue@^3 apexcharts@^4.7.0 vue3-apexcharts@^1.8.0 graphql@^16 monaco-editor@^0.52.2 @guolao/vue-monaco-editor@^1.5.5 monaco-graphql@^1.7.0

Vite Configuration

To enable GraphQL autocomplete in the TextEditor component, add the vite-plugin-monaco-editor plugin to your vite.config.js:

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import monacoEditorPlugin from 'vite-plugin-monaco-editor';

export default defineConfig({
	plugins: [
		vue(),
		monacoEditorPlugin({
			languageWorkers: ['editorWorkerService'],
			customWorkers: [
				{
					label: 'graphql',
					entry: 'monaco-graphql/esm/graphql.worker',
				},
			],
			globalAPI: true,
		}),
	],
});

If imports fail, try monacoEditorPlugin.default(...).

Usage

In your main.js or main.ts, register the plugin and provide one or more GraphQL schema endpoints:

import { createApp } from 'vue';
import App from './App.vue';
import { NightingQLPlugin } from 'nightingql-vue';

const app = createApp(App);

app.use(NightingQLPlugin, {
	schemaUrls: [
		'https://rickandmortyapi.com/graphql',
		'https://anyothergraphql.example/',
	],
});

app.mount('#app');

Requirements for endpoints:

• GET request to schemaUrl must return the GraphQL schema (introspection).
• POST request to schemaUrl must accept GraphQL queries and return JSON responses.

Components

After setup, import and use any of the following components:

• StatsWidget: statistical visualization widget (pie, bar, line).
• TextEditor: Monaco-based GraphQL query editor with autocomplete.
• BarChart, PieChart, LineChart: chart components.

Examples

<template>
	<StatsWidget uri="src/assets/Statistics-config.json" />
	<!-- or -->
	<StatsWidget />
</template>

<script setup>
import { StatsWidget } from 'nightingql-vue';
</script>

<template>
	<TextEditor
		v-model:text="query"
		:selected-schema-url="schemaUrl"
		height="300px"
	/>
</template>

<script setup>
import { TextEditor } from 'nightingql-vue';
import { ref } from 'vue';

const query = ref('query { __typename }');
const schemaUrl = 'https://rickandmortyapi.com/graphql';
</script>

API

NightingQLPlugin

• Options:

  • schemaUrls: string[] — List of GraphQL endpoint URLs.

getGraphQLSchema(url: string): GraphQLSchema

Return the cached or fetched GraphQL schema for the given URL.

License

BSD 3-Clause License