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?