Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: document pluginOptionsSchema #27337

Merged
merged 4 commits into from
Oct 16, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 19 additions & 1 deletion docs/docs/configuring-usage-with-plugin-options.md
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ For example, `gatsby-plugin-console-log` can access the `message` in order to lo
```javascript:title=plugins/gatsby-plugin-console-log/gatsby-node.js
exports.onPreInit = (_, pluginOptions) => {
console.log(
`logging: "${pluginOptions.message || `default message`}" to the console` // highlight-line
`logging: "${pluginOptions.message}" to the console` // highlight-line
)
}
```
Expand All @@ -54,6 +54,24 @@ The following table lists possible options values and an example plugin that mak

**Note**: Themes (which are a type of plugin) are able to receive options from a site's `gatsby-config` to be used in its `gatsby-config` in order to allow themes to be composed together. This is done by exporting the `gatsby-config` as a function instead of an object. You can see an example of this in the [`gatsby-theme-blog`](https://github.com/gatsbyjs/themes/tree/master/packages/gatsby-theme-blog) and [`gatsby-theme-blog-core`](https://github.com/gatsbyjs/themes/tree/master/packages/gatsby-theme-blog-core) repositories. Plugins are not capable of this functionality.

## How to validate options
mxstbr marked this conversation as resolved.
Show resolved Hide resolved

In order to make configuration easier for users, plugins can optionally define a [Joi](https://joi.dev) schema to enforce data types for each option using the [`pluginOptionsSchema` API](/docs/node-apis/#pluginOptionsSchema) in `gatsby-node.js`. When users of the plugin pass in configuration options, Gatsby will validate that the options match the schema.

For example, here is what the schema for `gatsby-plugin-console-log` looks like:
mxstbr marked this conversation as resolved.
Show resolved Hide resolved

```javascript:title=plugins/gatsby-plugin-console-log/gatsby-node.js
exports.pluginOptionsSchema = ({ Joi }) => {
return Joi.object({
optionA: Joi.boolean().required(),
message: Joi.string().required().default(`default message`),
optionB: Joi.boolean(),
})
}
```

This ensures users pass a boolean to `optionA` and `optionB`, and a string to `message`. If they pass options that do not match the schema, the validation will show an error when they run `gatsby develop`. It also defaults the `message` option to "default message" in case users do not pass their own.

## Additional resources

- [Example Gatsby site using plugin options with a local plugin](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-plugin-options)
14 changes: 11 additions & 3 deletions packages/gatsby/src/utils/api-node-docs.ts
Original file line number Diff line number Diff line change
Expand Up @@ -430,8 +430,16 @@ export const onPreExtractQueries = true
export const onCreateDevServer = true

/**
* Called during `gatsby develop` bootstrap to get and validate a plugins options schema
* @param {Joi} $0.Joi The instance of Joi to define the schema with
*
* Run during the bootstrap phase. Plugins can use this to define a schema for their options using
* [Joi](https://joi.dev) to validate the options users pass to the plugin.
* @param {object} $0
* @param {Joi} $0.Joi The instance of [Joi](https://joi.dev) to define the schema
* @example
* exports.pluginOptionsSchema = ({ Joi }) => {
* return Joi.object({
* // Validate that the anonymize option is defined by the user and is a boolean
* anonymize: Joi.boolean().required(),
* })
* }
*/
export const pluginOptionsSchema = true