withSwagger doesn't include schema stored in non /pages/ folder to serve in vercel

[ryanli-me]

withSwagger doesn't include schema stored in non /pages/ folder to serve in vercel

[ryanli-me]

hey, it's been a while, but i think @jonmiles had it right. getStaticProps always builds every route (whether in /pages/ or not). however if we only generate doc withwithSwagger like https://github.com/jellydn/next-swagger-doc/blob/main/example/pages/api/doc.ts, the resulting doc page will not have any schema (https://next-swagger-doc-demo.productsway.com/api/doc.)

[jellydn]

Thanks for reporting this issue. I will look into soon.

[ryanli-me]

I ended up just moving those comment to /pages/api and point schemafolder to /pages/api. only caveat is having to put the on the handler otherwise will not get into the final build. find it here https://github.com/cyberconnecthq/cyberprofile

[jellydn]

I found that you've used the old version. Could you try to use the latest one? Let me know if that works for you. Thanks.

https://github.com/cyberconnecthq/cyberprofile/blob/3cd7b9978e/package.json#L28

[jellydn]

Demo site shows this behavior. Both have same definition that includes schema but https://next-swagger-doc-demo.productsway.com/ has no schemas while https://next-swagger-doc-demo.productsway.com/api-doc has all schema

You would see the way to scan model schema works here https://next-swagger-doc-demo.productsway.com/api-doc

import { GetStaticProps, InferGetStaticPropsType } from 'next';
import { createSwaggerSpec } from 'next-swagger-doc';
import dynamic from 'next/dynamic';
import 'swagger-ui-react/swagger-ui.css';

const SwaggerUI = dynamic<{
  spec: Record<string, any>;
}>(import('swagger-ui-react'), { ssr: false });

function ApiDoc({ spec }: InferGetStaticPropsType<typeof getStaticProps>) {
  return <SwaggerUI spec={spec} />;
}

export const getStaticProps: GetStaticProps = async () => {
  const spec: Record<string, any> = createSwaggerSpec({
    apiFolder: 'pages/api',
    schemaFolders: ['models'],
    definition: {
      openapi: '3.0.0',
      info: {
        title: 'Next Swagger API Example',
        version: '1.0',
      },
    },
  });

  return {
    props: {
      spec,
    },
  };
};

export default ApiDoc;

This component works as expected as NextJs will call getStaticProps on build process.

[jellydn]

Just FYI, I've added a new CLI tool for this package which generated swagger then you could use with any swagger UI tool. You could check out the readme (usage 3) and example app for more detail.

https://next-swagger-doc-demo.productsway.com/playground#/

[jonmiles]

You would see the way to scan model schema works here https://next-swagger-doc-demo.productsway.com/api-doc

I'm also hitting this issue and unable to resolve.

I read your previous post but you're mistaken, the example is not actually working as you describe. It's only working because SwaggerUI is reading from a static file named swagger.json in the public folder.

If you look closer at the actual generated api here; https://next-swagger-doc-demo.productsway.com/api/doc. You'll see components is missing the required schemas.

May be you could take another look, I'd really love to know how to fix it.

[hrvojepavlinovic]

This indeed is an issue, it works with swagger UI, but it doesn't when you use withSwagger handler.

import { withSwagger } from 'next-swagger-doc'
import { openapiDescription } from '../../utils/openapi-config' // schemaFolders: ['models']

const swaggerHandler = withSwagger(openapiDescription)

export default swaggerHandler()

This works in dev mode, but when you build app, models directory gets lost, and you end up with empty components.

My workaround was to build spec using cli and serve static file.