No inputs being sent with API Request

evantahler commented 4 years ago

Q&A (please complete the following information)

OS: OSX
Browser: Chrome, Safari, Firefox (latest)
Method of installation: npm
Swagger-UI version: 3.25.1
Swagger/OpenAPI version: 2.0

Content & configuration

Example Swagger/OpenAPI definition:

swagger: '2.0'
info:
  description: The Grouparoo Staging Application
  version: 0.1.2-alpha.4
  title: '@grouparoo/app-staging-public'
  license:
    name: MPL-2.0
host: 'localhost:3000'
basePath: /v1
schemes:
  - http
paths:
  '/apiKey/{guid}':
    get:
      tags:
        - apiKey
      summary: view an apiKey
      consumes:
        - application/json
      produces:
        - application/json
      parameters:
        - in: path
          name: guid
          type: string
          required: true
      responses:
        '200':
          description: successful operation
        '400':
          description: Invalid input
        '404':
          description: Not Fount
        '422':
          description: Missing or invalid params
        '500':
          description: Server error
      security:
        - GrouparooAPIKey: []
securityDefinitions:
  GrouparooAPIKey:
    type: apiKey
    name: apiKey
    in: query
externalDocs:
  description: Learn more about Grouparoo
  url: 'https://www.grouparoo.com'

Swagger-UI configuration options:

import { Component } from "react";

interface Props {
  apiVersion: string;
}

export default class Swagger extends Component<Props> {
  componentDidMount() {
    // we need to wait for didMount as swagger won't render with SSR
    const SwaggerUi = require("swagger-ui");

    const { apiVersion } = this.props;

    const swagger = SwaggerUi({
      dom_id: "#swaggerContainer",
      url: `/api/${apiVersion}/swagger`,
      presets: [SwaggerUi.presets.apis],
      deepLinking: true,
      docExpansion: "none",
      filter: true
    });
  }

  render() {
    return <div id="swaggerContainer" />;
  }
}

Describe the bug you're encountering

When rendering swagger-ui with Next.js, none of the inputs forms' data is actually sent to the server in the API request. This manifests in a few ways:

Required params look like they are never filled out
The defaults are always used, no matter what

To reproduce...

Steps to reproduce the behavior:

Go to '...'
Click on '....'
Scroll down to '....'
See error

Expected behavior

Data the user types into the swagger ui should be sent to the server

Additional context or thoughts

The same swagger doc used on https://editor.swagger.io seems work fine. So I think the problem is isolated to the swagger-ui component. Also, something in Swagger might be conflicting with Next?

hkosova commented 4 years ago

Try swagger-ui-react instead of swagger-ui.

evantahler commented 4 years ago

swagger-ui-react suffers from the same SSR rendering issues (relies on window) and fails on server-side import. I chose "regular" swagger-ui because it seems like it was able to be mounted dynamically more reliably

evantahler commented 4 years ago

Also, even when using suspense to load swagger-ui-react, the routes aren't displayed. Clicking on any produe the error:

swagger-ui.js:8 Uncaught TypeError: Cannot read property 'indexOf' of undefined
    at value (swagger-ui.js:8)
    at swagger-ui.js:1
    at Connect.configureFinalMapState (connect.js:155)
    at Connect.computeStateProps (connect.js:142)
    at Connect.updateStatePropsIfNeeded (connect.js:204)
    at Connect.render (connect.js:340)
    at finishClassComponent (react-dom.development.js:17160)
    at updateClassComponent (react-dom.development.js:17110)
    at beginWork (react-dom.development.js:18620)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at beginWork$1 (react-dom.development.js:23203)
    at performUnitOfWork (react-dom.development.js:22154)
    at workLoopSync (react-dom.development.js:22130)
    at performSyncWorkOnRoot (react-dom.development.js:21756)

This is my suspense loader to avoid the window load errors

import { Suspense, lazy } from "react";
import Loader from "./../components/loader";
const SwaggerUI = lazy(() => import("swagger-ui-react"));

export default function ({ apiVersion }) {
  return (
    <div>
      <Suspense fallback={<Loader />}>
        <SwaggerUI
          url={`https://petstore.swagger.io/v2/swagger.json`}
        />
      </Suspense>
    </div>
  );
}

You can use the https://petstore.swagger.io/v2/swagger.json API endpoint to reproduce the error

swagger-api / swagger-ui