Skip to main content

GraphiqlPlugin

GraphiqlPlugin​

@vendure/graphiql-pluginplugin.ts

This plugin provides a GraphiQL UI for exploring and testing the Vendure GraphQL APIs.

It adds routes /graphiql/admin and /graphiql/shop which serve the GraphiQL interface for the respective APIs.

Installation​

import { GraphiqlPlugin } from '@vendure/graphiql-plugin';

const config: VendureConfig = {
  // Add an instance of the plugin to the plugins array
  plugins: [
    GraphiqlPlugin.init({
      route: 'graphiql', // Optional, defaults to 'graphiql'
    }),
  ],
};

Custom API paths​

By default, the plugin automatically reads the Admin API and Shop API paths from your Vendure configuration.

If you need to override these paths, you can specify them explicitly:

GraphiQLPlugin.init({
    route: 'my-custom-route', // defaults to `graphiql`
});

Query parameters​

You can add the following query parameters to the GraphiQL URL:

  • ?query=... - Pre-populate the query editor with a GraphQL query.
  • ?embeddedMode=true - This renders the editor in embedded mode, which hides the header and the API switcher. This is useful for embedding GraphiQL in other applications such as documentation. In this mode, the editor also does not persist changes across reloads.
Signature
class GraphiqlPlugin implements NestModule {
    static options: Required<GraphiqlPluginOptions>;
    constructor(processContext: ProcessContext, configService: ConfigService, graphiQLService: GraphiQLService)
    init(options: GraphiqlPluginOptions = {}) => Type<GraphiqlPlugin>;
    configure(consumer: MiddlewareConsumer) => ;
}
  • Implements: NestModule

options​

property
Required<GraphiqlPluginOptions>

constructor​

method
(processContext: ProcessContext, configService: ConfigService, graphiQLService: GraphiQLService) => GraphiqlPlugin

init​

method
(options: GraphiqlPluginOptions = {}) => Type<GraphiqlPlugin>

configure​

method
(consumer: MiddlewareConsumer) =>