Is requestInterceptor is apply once when use in react?

[shimika]

Q&A (please complete the following information)

• OS: [e.g. macOS]
• Browser: [e.g. chrome, safari]
• Version: [e.g. 22]
• Method of installation: [e.g. npm, dist assets]
• Swagger-UI version: v3.24.0, v4.19.0, v5.0.0, v5.12.0
• Swagger/OpenAPI version: [e.g. Swagger 2.0, OpenAPI 3.0]

Content & configuration

Swagger/OpenAPI definition:

# your YAML here

Swagger-UI configuration options:

<SwaggerUI
  url={endPointUrl}
  requestInterceptor={requestInterceptor}
  docExpansion="none"
/>

?yourQueryStringConfig

Screenshots

How can we help?

I am using swagger-ui in my react project. when I update swagger-ui v3 to v5, requestInterceptor is something wrong This is my code

function component() {
    const [headers,] = useContext(HeaderContext)

    const requestInterceptor = useCallback((request: Request): Request => {
        console.log('on request: ', headers)

        return request
    }, [headers])

    return (
        <>
            <div onClick={() => requestInterceptor({})}>Show header</div>
            <SwaggerUI
                url={endPointUrl}
                requestInterceptor={requestInterceptor}
                docExpansion="none"
            />
        </>
    )
}

When I use swagger-ui v3 and v4, both clicking Show header and api request trigger requestInterceptor with latest headers information. But when I update to v5, Click show header shows latest headers but api request only shows initialized headers.

When I find information for these situation?

Of course I can solve this using useRef. However, I am curious about the history and reason for the change.

[Piumal1999]

Hi @Shimika, I also encountered this issue. Were you able to find the reason behind the change?

[marvinthepa]

I have the same problem. https://stackoverflow.com/a/66561791 suggests that there is some useCallback (or useMemo) somewhere inside the SwaggerUI component that does not declare its dependencies correctly. However, I was not able to find it..

Workaround is to use a React class component with requestInterceptor as a method that uses local state.