API client in Javascript

Question

I need a little help to solve a problem in my project.

Scenario:

First: I have a SPA web site that is being developed in Vue.js.

Second: I also have a Web API spec in Swagger that I want to use to generate my client code in Javascript.

Lastly: I'm using swagger-codegen-cli.jar for that.

What I've done until now

1 - Download the last swagger-codegen-cli.jar stable version with javascript support:

curl http://central.maven.org/maven2/io/swagger/swagger-codegen-cli/2.4.7/swagger-codegen-cli-2.4.7.jar -o swagger-codegen-cli.jar

2 - Generate the client code using:

java -jar swagger-codegen-cli.jar generate -i http://192.168.0.85:32839/api/swagger/v1/swagger.json -l javascript -o ./web_api_client/

3 - Add the generated module to my project:

  "dependencies": {
    // ...
    "vue": "^2.6.10",
    "vue-router": "^3.0.3",
    "web_api_client": "file:./web_api_client"
  },

4 - Execute npm install. Apparently, it's working fine.

5 - At this moment I faced the problem. For some reason, the module generated isn't loaded completely.

export default {
  name: 'home',
  components: {
    HelloWorld
  },
  mounted() {
    var WebApiClient = require("web_api_client");
    var defaultClient = WebApiClient.ApiClient.instance;

    var oauth2 = defaultClient.authentications["oauth2"];
    oauth2.accessToken = "YOUR ACCESS TOKEN";

    var apiInstance = new WebApiClient.VersaoApi();
    var callback = function(error, data, response) {
      if (error) {
        console.error(error);
      } else {
        console.log('API called successfully. Returned data: ' + data);
      }
    };
    apiInstance.apiVersaoGet(callback);
  }
}

6 - The line var WebApiClient = require("web_api_client"); is working without any error, however, not working 100%. The instance of the module has been created but empty. For instance, WebApiClient.ApiClient is always undefined.

7 - I took a look at the generated code and I think the problem is related with the way the module is being loaded.

(function(factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module.
    define(['ApiClient', 'api/VersaoApi'], factory);
  } else if (typeof module === 'object' && module.exports) {
    // CommonJS-like environments that support module.exports, like Node.
    module.exports = factory(require('./ApiClient'),  require('./api/VersaoApi'));
  }
}(function(ApiClient, VersaoApi) {
  'use strict';
 // ...

In this code, neither of ifs blocks are executed.

Has someone faced a problem like that? Some advice?

Many thanks, folks.

i think your question is pretty similar to this one https://stackoverflow.com/questions/44356241/how-to-bundle-swagger-generated-code-with-webpack — Max Sinev, Jul 16 '19 at 10:29
After expending a few hours trying to fix it I solve my problem using ES6 instead of ES5. I'll edit my post to explain what I did. Thanks Max Sinev.. — andercruzbr, Jul 16 '19 at 14:12
Instead of adding your solution into the question text, post it in the Answers section. Then you can [accept that answer](https://meta.stackexchange.com/a/5235/131247) to indicate that the issue is resolved. — Helen, Jul 16 '19 at 17:15

score 1 · Answer 1 · answered Jul 16 '19 at 17:17

Solution

After a while trying to fix the problem with require("web_api_client"); I decided to use ES6 instead ES5.

I found an option in swagger-codegen-cli.jar to generate the client code using ES6 as shown below:

java -jar swagger-codegen-cli.jar generate -i http://192.168.0.85:32839/api/swagger/v1/swagger.json -l javascript --additional-properties useES6=true -o ./web_api_client/

Using ES6 I was able to import the javascript module direct from the generated source as shown in the code below.

import WebApiClient from "./web_api_client/src/index";

let defaultClient = WebApiClient.ApiClient.instance;
defaultClient.basePath = 'http://192.168.0.85:32839';

// Configure OAuth2 access token for authorization: oauth2
let oauth2 = defaultClient.authentications["oauth2"];
oauth2.accessToken = "YOUR ACCESS TOKEN";

let apiInstance = new WebApiClient.VersaoApi();

apiInstance.apiVersaoGet((error, data, response) => {
  if (error) {
    console.error(error);
  } else {
    console.log("API called successfully. Returned data: " + data + response);
  }
});

When I first ran the code I got an error because the module WebApiClient generated didn't have the keyword default in the export block.

Original generated code

export {
    /**
     * The ApiClient constructor.
     * @property {module:ApiClient}
     */
    ApiClient,
    // ...

Alter changed

export default {
    /**
     * The ApiClient constructor.
     * @property {module:ApiClient}
     */
    ApiClient,
    // ...

Now everything is working fine.