swagger-ui
swagger-ui copied to clipboard
swagger-api
Incorrect Schema is rendered
Q&A (please complete the following information)
- OS: macOS
- Browser: Brave
- Version: 1.76.82
- Method of installation: npm
- Swagger-UI version: 5.20.1
- Swagger/OpenAPI version: OpenAPI 3.1
Content & configuration
Example Swagger/OpenAPI definition:
There are 2 specifications displayed one below the other.
{
"openapi": "3.1.0",
"info": {
"version": "1.0.0",
"title": "Swagger Petstore",
"license": {
"name": "MIT",
"url": "https://opensource.org/licenses/MIT"
}
},
"servers": [
{
"url": "http://petstore.swagger.io/v1"
}
],
"paths": {
"/pets": {
"get": {
"summary": "List all pets",
"operationId": "listPets",
"tags": [
"pets"
],
"parameters": [
{
"name": "limit",
"in": "query",
"description": "How many items to return at one time (max 100)",
"required": false,
"schema": {
"type": "integer",
"format": "int32"
}
}
],
"responses": {
"200": {
"description": "A paged array of pets",
"headers": {
"x-next": {
"description": "A link to the next page of responses",
"schema": {
"type": "string"
}
}
},
"content": {
"application/json": {
"schema": {
"$ref": "#/components/schemas/Pets"
}
}
}
},
"default": {
"description": "unexpected error",
"content": {
"application/json": {
"schema": {
"$ref": "#/components/schemas/Error"
}
}
}
}
}
},
"post": {
"summary": "Create a pet",
"operationId": "createPets",
"tags": [
"pets"
],
"responses": {
"201": {
"description": "Null response"
},
"default": {
"description": "unexpected error",
"content": {
"application/json": {
"schema": {
"$ref": "#/components/schemas/Error"
}
}
}
}
}
}
},
"/pets/{petId}": {
"get": {
"summary": "Info for a specific pet",
"operationId": "showPetById",
"tags": [
"pets"
],
"parameters": [
{
"name": "petId",
"in": "path",
"required": true,
"description": "The id of the pet to retrieve",
"schema": {
"type": "string"
}
}
],
"responses": {
"200": {
"description": "Expected response to a valid request",
"content": {
"application/json": {
"schema": {
"$ref": "#/components/schemas/Pet"
}
}
}
},
"default": {
"description": "unexpected error",
"content": {
"application/json": {
"schema": {
"$ref": "#/components/schemas/Error"
}
}
}
}
}
}
}
},
"components": {
"schemas": {
"Pet": {
"type": "object",
"required": [
"id",
"name"
],
"properties": {
"id": {
"type": "integer",
"format": "int64"
},
"name": {
"type": "string"
},
"tag": {
"type": "string"
}
}
},
"Pets": {
"type": "array",
"items": {
"$ref": "#/components/schemas/Pet"
}
},
"Error": {
"type": "object",
"required": [
"code",
"message"
],
"properties": {
"code": {
"type": "integer",
"format": "int32"
},
"message": {
"type": "string"
}
}
}
}
}
}
{
"openapi": "3.1.0",
"info": {
"title": "Cat/ Dog Pet Store API",
"description": "An example API for a pet store",
"version": "1.0.0"
},
"paths": {
"/pets": {
"get": {
"summary": "List all pets",
"operationId": "listPets",
"responses": {
"200": {
"description": "A list of pets.",
"content": {
"application/json": {
"schema": {
"$ref": "#/components/schemas/PetList"
}
}
}
}
}
}
}
},
"components": {
"schemas": {
"PetList": {
"type": "array",
"items": {
"$ref": "#/components/schemas/Pet"
}
},
"Pet": {
"type": "object",
"required": [
"petType"
],
"properties": {
"petType": {
"type": "string"
}
},
"discriminator": {
"propertyName": "petType",
"mapping": {
"dog": "#/components/schemas/Dog",
"cat": "#/components/schemas/Cat"
},
"x-custom-extension": "This is a custom extension for the discriminator"
}
},
"Dog": {
"allOf": [
{
"$ref": "#/components/schemas/Pet"
},
{
"type": "object",
"properties": {
"breed": {
"type": "string"
},
"barkVolume": {
"type": "integer",
"description": "Volume of the bark"
}
}
}
]
},
"Cat": {
"allOf": [
{
"$ref": "#/components/schemas/Pet"
},
{
"type": "object",
"properties": {
"color": {
"type": "string"
},
"purrLoudness": {
"type": "integer",
"description": "Loudness of the purr"
}
}
}
]
}
}
}
}
Swagger-UI configuration options: For 1,
SwaggerUI({
spec: this.swaggerSpec,
dom_id: '#swagger-ui-one',
showExtensions: true,
defaultModelRendering: 'model',
deepLinking: true,
defaultModelsExpandDepth: 1,
});
For 2,
SwaggerUI({
spec: this.swaggerSpec,
dom_id: '#swagger-ui-two',
showExtensions: true,
defaultModelRendering: 'model',
defaultModelsExpandDepth: 1,
});
Describe the bug you're encountering
In our app, we have 2 OAS 3.1 API documents, displayed one below the other. However, the schema of the second one is wrong; it's rendering the schema of the first API only.
Expected behavior
The schema of the first API is shown below. It's rendered correctly.
The schema of the second API is shown below. It's not rendered correctly. Instead, the schema of above API is rendered.
Hi @whoareyoukid,
Just to confirm, you're rendering to SwaggerUI on the same HTML Page?
I assume yes, by your note here:
There are 2 specifications displayed one below the other.
This might be the cause, where the code doesn't account for the fact, there might be multiple instances of SwaggerUI on the same page.
For now can you try workaround using ShadowDOM or Iframes?
