swagger-api / swagger-api/swagger-codegen

Generate React (with flow) client

Open
#5,733 24 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

General: Suggestion
Dominant language
Mustache
Stars
17.8k
Forks
6k
PR merge metrics
No merged PRs in 30d

Description

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the JavaScript client generation from Swagger Editor and inspect the generated node module and its ApiClient import failure in the create-react-app setup. Compare that output with the TypeScript options and Flow requirements described in the issue. Done means a generated client can be used in a React app with the requested static typing support and without the reported module error.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
api, frontend, tooling
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.