What is the best way to filter out and show only 1 endpoint?

Q&A (please complete the following information)

• Swagger-UI version: 3.10.0
• Swagger/OpenAPI version: OpenAPI 3.0

Using swagger-ui-react. We want to render individual endpoints on a quickstart page. What is the best way to display only a single endpoint and method. Right now, I am looking fetching the spec in a higher order component and filtering down to only the path I want and passing that in to the spec param of SwaggerUI component. But that feels hacky. Is there a better way?

Here is what is currently there <SwaggerUI url={LINK_TO_SPEC} docExpansion="list"/>

What I’d like to be able to do <SwaggerUI url={SWAGGER_LINK} docExpansion="list" path={'/device/'} method='get'/>

And that will only show the GET method of the /device/ path. Ignoring all other paths in the spec.

I’ve been searching through the docs and issues but can’t figure a non hacky answer. Apologies if this is a basic question. Thank you for the help.

[thiagoalves]

After some struggling, I finally came out with a solution that works:

import React from 'react'
import { fromJS } from 'immutable'
import SwaggerUI from "swagger-ui-react"
import "swagger-ui-react/swagger-ui.css"
import './styles.css';

const apiUrl = 'https://raw.githubusercontent.com/OAI/OpenAPI-Specification/master/examples/v3.0/petstore.yaml';

class MyTestLayout extends React.Component {
  render() {
    const {
      funcs,
      params
    } = this.props

    const specSelectors = {
      isOAS3() { return true },
      url() { return apiUrl },
      taggedOperations() {
        return fromJS({
          "default": {
            "operations": [
              {
                "path": params.path,
                "method": params.method
              }
            ]
          }
        })
      },
    }

    const Operations = funcs.getComponent("operations", true)

    return (
      <div>
        <Operations specSelectors={specSelectors} />
      </div>
    )
  }
}

// Create the plugin that provides our layout component
const TestPlugin = (props) => {
  return {
    components: {
      TestLayout: (funcs) => <MyTestLayout params={props} funcs={funcs} />
    }
  }
}

export default class ApiDoc extends React.Component {

  render() {
    return (
      <SwaggerUI
        url={apiUrl}
        docExpansion={"full"}
        plugins={[TestPlugin(this.props)]}
        layout={"TestLayout"}   
      />
    );
  }
}

Usage:

<ApiDoc method="get" path="/pets/{petId}" />

[tim-lai]

@exit99 There currently does not exist a method to render a single endpoint via a query parameter or option field. It certainly is possible with a custom plugin.