Forum Discussion

micscopau's avatar
micscopau
New Member
2 months ago

Endpoint Expansion

I am using @nestjs/swagger to auto generate my swagger page. This is my config setup:

```  const config = new DocumentBuilder()
    .setTitle("Swagger API")
    .setDescription("The API")
    .setVersion("1.0")
    .addTag("myTag")
    .build()

  const document = () => SwaggerModule.createDocument(app, config)
  SwaggerModule.setup("api", app, document, {
    swaggerOptions: {
      docExpansion: "none", // Collapses all tags and endpoints by default
      defaultModelsExpandDepth: -1, // Models are hidden by default
      defaultExpandedDepth: 1, // Only expand tags, not individual endpoints
    }
  })```

The issue I am experiencing is when I click to expand an endpoint on the API, all of the endpoints expand at the same time and I do not want this. Am I missing something in my configs, or is this a quirk/bug with @nestjs/swagger?

  • merry867's avatar
    merry867
    Occasional Contributor
    23 days ago

    Hello,

    The behavior you're describing—where clicking one endpoint causes all endpoints to expand—is not typical for Swagger UI and could indicate a configuration issue or a bug in the library integration.

    Let's troubleshoot and resolve the issue:

    Steps to Address the Problem
    Verify Swagger UI Settings: Your current swaggerOptions configuration looks correct for collapsing all endpoints and controlling the expansion behavior. However, you may need to refine the settings:

    Ensure docExpansion: "none" is correctly applied. This option should collapse all tags and endpoints by default.
    Double-check that there are no unintended side effects from defaultExpandedDepth: 1.
    Update the SwaggerModule.setup call slightly for clarity:

    typescript
    Statistics for Spotify
    SwaggerModule.setup("api", app, document, {
      swaggerOptions: {
        docExpansion: "none", // Collapses all tags and endpoints
        defaultModelsExpandDepth: -1, // Hides models by default
        defaultExpandedDepth: 0, // Prevents automatic expansion of tags or endpoints
      },
    });
    Setting defaultExpandedDepth: 0 explicitly disables expanding tags or endpoints when the page loads.

    Update @nestjs/swagger: Ensure you're using the latest version of @nestjs/swagger and swagger-ui-express. Sometimes issues are resolved in newer versions:

    bash
    npm install @nestjs/swagger swagger-ui-express --save
    Check Swagger UI Behavior: If the problem persists, it could be a Swagger UI quirk unrelated to @nestjs/swagger. Test your configuration by generating a Swagger JSON file and using it directly with the Swagger Editor to see if the issue replicates.

    Custom CSS or JS Conflicts: Ensure there are no custom CSS or JavaScript interfering with Swagger UI's default behavior. This is rare but worth checking if you're applying any customizations to your Swagger page.

    Alternative Configurations: If you suspect the issue is a library quirk, you can override the behavior using a custom Swagger UI setup. For example:

    typescript
    SwaggerModule.setup("api", app, document, {
      customCss: ".opblock-summary { cursor: pointer; }",
      customJs: "/path/to/custom.js",
      swaggerOptions: {
        docExpansion: "none",
      },
    });
    Add a small script in custom.js to ensure only the clicked endpoint expands:

    javascript
    document.addEventListener("DOMContentLoaded", function () {
      document.querySelectorAll(".opblock-summary").forEach((el) =>
        el.addEventListener("click", (event) => {
          const otherEndpoints = document.querySelectorAll(".opblock.is-open");
          otherEndpoints.forEach((endpoint) => {
            if (endpoint !== el.parentElement) {
              endpoint.classList.remove("is-open");
            }
          });
        })
      );
    });
    Additional Debugging
    If none of the above resolves the issue, provide more details:

    The versions of @nestjs/swagger and swagger-ui-express you're using.
    Whether the issue appears in specific browsers or universally.
    Any custom middleware or frontend that might affect the Swagger page.
    This information will help narrow down the root cause!