GraphiqlPlugin
GraphiqlPlugin
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) =>