Skip to main content

Usage

Installation#

  1. In an existing Docusaurus project, install the plugin:
yarn add docusaurus-graphql-plugin
  1. Add the plugin to your docusaurus.config.js file:
module.exports = {
plugins: [
[
"docusaurus-graphql-plugin",
{
// can be a path, a glob or an URL
schema: "schema.graphql",
},
],
],
};

  1. Run the command npx docusaurus docs:generate:graphql

  2. The command will have generated files that you can now add to your sidebars.js:

modules.exports = {
docs: {
API: [
"api/queries",
"api/mutations",
"api/objects",
"api/interfaces",
"api/enums",
"api/unions",
"api/inputObjects",
"api/scalars",
],
},
};
  1. You can now run yarn start to serve your documentation

Options#

id#

This option is common to docusaurus plugins and can be used to differentiate multiple instance of the plugin. For example:

module.exports = {
plugins: [
[
"docusaurus-graphql-plugin",
{
id: "first-api",
schema: "first-api.graphql",
// it's important that routeBasePath has a different
// value for each instance of the plugin
routeBasePath: "/docs/first-api",
},
],
[
"docusaurus-graphql-plugin",
{
id: "second-api",
schema: "second-api.graphql",
// it's important that routeBasePath has a different
// value for each instance of the plugin
routeBasePath: "/docs/second-api",
},
],
],
};

With the configuration above you would end up with two different commands:

  • docs:generate:graphql:first-api
  • docs:generate:graphql:second-api

schema#

Can be a path, a glob or an URL used to load your GraphQL schema.

routeBasePath#

Defaults: /docs/api/

This option can be used to customize the output folder and thus the GraphQL docs' path.

For example if you want the API docs to be served over /docs/api-reference/ instead of /docs/api/, you can change this option to /docs/api-reference/. Note that you can also have more levels to the path, e.g /docs/reference/api/.

module.exports = {
plugins: [
[
"docusaurus-graphql-plugin",
{
schema: "schema.graphql",
routeBasePath: "/docs/api-reference/",
},
],
],
};

sidebar#

This option can be used to specify sidebar metadata when using auto-generated sidebar.

module.exports = {
plugins: [
[
"docusaurus-graphql-plugin",
{
schema: "schema.graphql",
sidebar: {
label: "My Awesome Schema",
position: 1,
},
},
],
],
};

The configuration above will create a _category_.json file in the routeBasePath looking like this :

{
"label": "My Awesome Schema",
"position": 1
}
Edit this page