Schema Imports
You can import model definitions from your API schema and render them in your Docusaurus Docs. You'll need to create an .mdx
file and import the React Component. Read more here about MDX in Docusaurus.
Import Schema Model in Docs
The pointer
prop is passed on to Redoc.
import ApiSchema from '@theme/ApiSchema';
<ApiSchema pointer="#/components/schemas/Pet" />;
Results
Import Schema Model (with example) in Docs
import ApiSchema from '@theme/ApiSchema';
<ApiSchema example pointer="#/components/schemas/Pet" />;
Results
id | |
object Categories this pet belongs to | |
name required | string The name given to a pet |
photoUrls required | Array of strings <url> <= 20 items The list of URL to a cute photos featuring pet |
friend | object Recursive |
Array of objects (Tag) non-empty [ items ] Tags attached to the pet | |
status | string Enum: "available" "pending" "sold" Pet status in the store |
petType | string Type of a pet cat cat dog bee |
huntingSkill required | string Default: "lazy" Enum: "clueless" "lazy" "adventurous" "aggressive" The measured skill for hunting |
Example
cat
cat
dog
bee
{- "id": 0,
- "category": {
- "id": 0,
- "name": "string",
- "sub": {
- "prop1": "string"
}
}, - "name": "Guru",
- "photoUrls": [
- "string"
], - "friend": { },
- "tags": [
- {
- "id": 0,
- "name": "string"
}
], - "status": "available",
- "petType": "cat",
- "huntingSkill": "adventurous"
}
Importing Schema Model with multiple OpenAPI schemas
If you have multiple APIs loaded with redocusaurus, then it is recommended to add id
s to the config so that you can refer them when loading schema models.
docusaurus.config.js
const config = {
presets: [
[
'redocusaurus',
{
specs: [
{
id: 'using-spec-yaml',
spec: 'openapi.yaml',
url: `/openapi-page.yaml`,
route: '/examples/using-spec-yaml/',
},
{
id: 'using-spec-url',
spec: 'https://redocly.github.io/redoc/openapi.yaml',
route: '/examples/using-spec-url/',
},
],
theme: {
/**
* Highlight color for docs
*/
primaryColor: '#1890ff',
/**
* Options to pass to redoc
* @see https://github.com/redocly/redoc#redoc-options-object
*/
options: { disableSearch: true },
},
},
],
'@docusaurus/preset-classic',
],
title: 'Redocusaurus',
};
import ApiSchema from '@theme/ApiSchema';
<ApiSchema id="using-spec-yaml" pointer="#/components/schemas/Pet" />;
<ApiSchema id="using-spec-url" pointer="#/components/schemas/Pet" />;