ApiOperation
You can import operation definitions from your API schema and render them in your Docusaurus Docs.
You cannot import a React component inside a .md file.
Change your file extension to .mdx before importing the React Component.
Read more here about MDX in Docusaurus.
Import
import ApiOperation from '@theme/ApiOperation';
Examples
Basic example
The pointer prop is passed on to Redoc. Note that / is escaped as ~1.
<ApiOperation pointer="#/paths/~1pet/post" />
Results
Display with "examples"
import ApiOperation from '@theme/ApiOperation';
<ApiOperation example pointer="#/paths/~1pet/post" />;
Results
Add a new pet to the store
Add new pet to the store inventory.
Authorizations:
cookie Parameters
| cookieParam required | integer <int64> Some cookie |
header Parameters
| Accept-Language | string Default: en-AU Example: en-US The language you prefer for messages. Supported values are en-AU, en-CA, en-GB, en-US |
Request Body schema: required
Pet object that needs to be added to the store
object Categories this pet belongs to | |
| name required | string The name given to a pet |
| photoUrls required | Array of strings <url> <= 20 items [ items <url > ] The list of URL to a cute photos featuring pet |
| friend | object Recursive |
Array of objects (Tag) non-empty Tags attached to the pet | |
| status | string Enum: "available" "pending" "sold" Pet status in the store |
| petType | string Type of a pet |
| huntingSkill required | string Default: "lazy" Enum: "clueless" "lazy" "adventurous" "aggressive" The measured skill for hunting |
Responses
Request samples
- Payload
- C#
- PHP
{- "category": {
- "name": "string",
- "sub": {
- "prop1": "string"
}
}, - "name": "Guru",
- "photoUrls": [
- "string"
], - "friend": { },
- "tags": [
- {
- "name": "string"
}
], - "status": "available",
- "petType": "cat",
- "huntingSkill": "adventurous"
}Multiple OpenAPI schemas
If you have multiple APIs loaded with redocusaurus, then it is recommended to add ids to the config so that you can refer them when loading operation models.
const config = {
presets: [
'@docusaurus/preset-classic',
[
'redocusaurus',
{
specs: [
{
id: 'using-single-yaml',
spec: 'openapi/single-file/openapi.yaml',
route: '/examples/using-single-yaml/',
},
{
id: 'using-remote-url',
spec: 'https://redocly.github.io/redoc/openapi.yaml',
route: '/examples/using-remote-url/',
},
],
},
],
],
title: 'Redocusaurus',
};
import ApiOperation from '@theme/ApiOperation';
<ApiOperation id="using-single-yaml" pointer="#/paths/~1pet/post" />
<ApiOperation id="using-remote-url" pointer="#/paths/~1pet/post" />
Results for ID id="using-single-yaml"
Results for ID id="using-remote-url"
Pass JSON Spec Directly
You can also provide a JSON spec to the component like this. Docusaurus will load the file directly during build time, but the file will not undergo any pre-processing at build time and so some features might be missing.
import ApiOperation from '@theme/ApiOperation';
import openApi from './api-with-examples.json';
<ApiOperation spec={openApi} pointer="#/paths/~1pet/post" />;
You cannot load yaml file like this:
import openApi from './api-with-examples.yaml';
Without the right webpack configuration to handle such file format.