Generate React (with flow) client

[7mllm7]

Background

Using Swagger Editor, I created a spec for my API.
I see that Swagger Editor also provides a "Generate a client" option (probably using Swagger Codegen).

Objective

I want to generate a client and use it in my React app (created with create-react-app), and preferably enjoy some static typing capabilities (currently using flow).

Currently

None of the options in Swagger Editor there seem to work:

• javascript - provides a vanilla node module that you need to npm install it as a dependency to your project. Now, not only this doesn't have any classes / types, but also fails with:

Uncaught Error: Cannot find module "ApiClient"
    at webpackMissingModule (index.js:17)
    at exports.ApiClient (index.js:17)
    at Object.<anonymous> (index.js:22)
    at __webpack_require__ (bootstrap 75f547b…:555)
    at fn (bootstrap 75f547b…:86)
    at new Index (index.js:87)
    at ReactCompositeComponent.js:295
    at measureLifeCyclePerf (ReactCompositeComponent.js:75)
    at ReactCompositeComponentWrapper._constructComponentWithoutOwner (ReactCompositeComponent.js:294)
    at ReactCompositeComponentWrapper._constructComponent (ReactCompositeComponent.js:280)

• typescript-* options are not compatible with js, and I don't necessarilty know how / want to add TypeScript to my project.
• *-angular options are of course irrelevant.

Approaches

• Generate .ts file and covert it to flow. How??
• Manually adding the generated .js files to my project. Currently doesn't work as the generated code comes with its own dependencies.
• Add TypeScript to my project (should I replace flow then?). I think it's not that easy without ejecting out of the create-react-app boilerplate.

I'm sure that a javascript client is one of the most popularly used generated client, so what am I missing here???

Thanks

[cbornet]

Note that you could also use the dynamic https://github.com/swagger-api/swagger-js lib

[cbornet]

And you can have a look at swagger-ui which is a react app based on that lib.

[7mllm7]

@cbornet, thanks for your replies.

• https://github.com/swagger-api/swagger-js indeed is dynamic, and while it's ok, I want to make a use of strongly typed capabilities (like flow). In other words, I want to be stopped on build time if I didn't call an endpoint with the right parameters.
• Do you really think I can deduce such client generator from swagger-ui ? If so, I'd love to get some guidance where to start.

Thanks again

[TimSusa]

Hey, we would love to have a generator with flow capabilities. Maybe one could take the typescript generator and change it to flow, because the syntax seems to be quite similar in some ways. It is a pitty, that we have not ressources here for this task at the moment. :-(

[fb55]

@TimSusa @wing328 How do you guys feel about adding flow types to the es6 version? That one already has a babel config, it would be easy to add a transform to strip flow types to that and convert the jsdoc comments to flow types.

[7mllm7]

Even though I ended up using react-script-ts to add TypeScript to my React project, I think a flow type generated client would be very useful!

[wing328]

How do you guys feel about adding flow types to the es6 version? That one already has a babel config, it would be easy to add a transform to strip flow types to that and convert the jsdoc comments to flow types.

@fb55 sounds good to me. What about adding an "useFlow" as I'm not sure if every JS developers want that?

The useFlow option only matters when useES6 is set to true.

[johnryan]

Hi all, has anyone found a solution to this issue? We currently rely pretty heavily on flow-typed support but I'm really excited by the prospect of using swagger-codegen to generate clients.

[7mllm7]

@johnryan like I replied before, I just migrated to TypeScript and now using the TS generated client.
In general it was worth the effort as IMHO TypeScript works a little better than flow.

[wing328]

@johnryan we can work with you to incorporate the support of flow-typed into the JS API client generator. Let us know if you've time to contribute the enhancement.

[johnryan]

@wing328 that would be great. Could you suggest anywhere in particular to get started? I'm pretty new to the swagger stuff so an example of how this is set up with typescript or something would be pretty helpful.

[wing328]

@johnryan to start with, what error did you get when using the JS API client with flow? and are you able to resolve those issues manually? If yes, we can incorporate the fix into the JS mustache templates.

[johnryan]

@wing328 there are no errors when using it with flow but i'd like to automatically generate the correct models and typing (very similar to the typescript version). i.e.:

set accessToken(token: string) {
        this.authentications.petstore_auth.accessToken = token;
 }

It SEEMS like most of the .ts logic is here. Am I correct that the first step would be to write similar .moustache files for flowtype?

[wing328]

@johnryan https://github.com/swagger-api/swagger-codegen/wiki/FAQ#how-can-i-submit-a-pr-to-fix-bugs-or-make-enhancements is a good starting point for 1st time contributor.

The JS (ES5) templates can be found in https://github.com/swagger-api/swagger-codegen/blob/master/modules/swagger-codegen/src/main/resources/Javascript/api.mustache

After making changes to the JS ES5 templates, please run the following to update the JS (ES5) petstore samples so that the CI (travis) can verify the change:
./bin/javascript-petstore.sh (Mac/LInux) or .\bin\windows\javascript-petstore.bat (Windows)

Note: JS API client in current master (2.3.0-SNAPSHOT) uses ES6 by default and there's ongoing work with various bug fixes and enhancements. ES6 templates can be found in https://github.com/swagger-api/swagger-codegen/tree/master/modules/swagger-codegen/src/main/resources/Javascript/es6

[niebloomj]

Any update on this? Using swagger in our react app is a nightmare without types.

[wing328]

cc @CodeNinjai @frol @cliffano

[frol]

I have no experience with Flow, so I won't be able to help here. Sorry.

[wing328]

@frol no need to sorry. Appreciate your time reviewing this.

@niebloomj @johnryan one way is to manually patch the Petstore clients and submit a PR. Then we'll reverse engineer the change back to the mustache templates.

[mnemanja]

Hi guys,
has anyone continued to work on this or has everyone switched to Typescript because of this? :)

[johnryan]

@mnemanja haven't switched to Typescript but just have been using untyped swagger clients until I get back to this.

[mnemanja]

@johnryan thanks for the quick response.
I find myself in the situation where I'm proposing, here in a company, React over Angular, Flow (as more compatible with React type system) over Typescript and the major breaking point is the swagger code generation.

In the end, we'll take the same path, but it would be very nice if Flow typed API code generation would be available.

Also, it's a bit hard for me to believe that there hasn't been more effort invested into supporting a Swagger-flow. I've searched far and wide, but without much luck. Have I missed some solution that allows projects with Flow to consume Swagger generated API in the more useful manner?

[johnryan]

@mnemanja Definitely feel your pain there. Overall (at least for my use case) it hasn't been as bad as i thought it would be. My networking calls are mostly side effects of actions (which i have manually flow typed anyway) and serve as a first line of defense and by the time we ship anything any type-related issues are flushed out.

If your API has breaking changes often or if you have a large number of endpoints this might not be as trivial as i'm making it seem, but overall it hasn't been enough of a reason for me to consider switching the whole project from flow to typescript. If it does become a big enough problem i'd probably work on adding support for flow to swagger before such a large undertaking anyway.

[mnemanja]

@johnryan Thanks for the support! :)

[chmac]

Haven’t tested it, but this might be useful if you’re looking to generate a frontend from a swagger spec. https://github.com/api-platform/client-generator